/* POS Register — full-screen two-pane register layout.
   Tracks light/dark themes by aliasing the panel's local names onto the real theme
   variables (--bs-* + the app's --s-card-* set, defined in themes/theme-{light,dark}.css).
   The earlier --s-body-bg/--s-panel-bg/etc. names were never defined anywhere, so every
   var() fell through to its light hard-coded fallback and the page stayed light in dark mode. */
.s-pos-register {
    --s-body-bg: var(--bs-body-bg, #f4f5f7);          /* page / recessed surfaces */
    --s-panel-bg: var(--s-card-solid-bg, #fff);       /* raised cards: topbar, cart, search, menus */
    --s-border-color: var(--bs-border-color, #e3e6ea);
    --s-text-muted: var(--bs-secondary-color, #6c757d);
    --s-primary: #2e7d32;                             /* POS accent green — legible on both themes */
}
:root.theme-cosmos-dark .s-pos-register {
    --s-primary: #4caf50;                             /* brighter green for contrast on dark */
}

.s-pos-register,
.s-pos-register .pos-root {
    height: 100%;
}

.s-pos-register .pos-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
    /* One unified surface: the page backdrop matches the white cards (theme card colour
       in dark mode) so there aren't two competing background tones. Cards stay delineated
       by their borders; recessed insets (tiles, payment bar) keep a subtle contrast. */
    background: var(--s-panel-bg, #fff);
}

/* Top bar */
.s-pos-register .pos-topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #e3e6ea);
    font-size: 14px;
}
.s-pos-register .pos-topbar .pos-clock { margin-left: auto; opacity: .7; }
.s-pos-register .pos-terminal-select {
    border: 1px solid var(--s-border-color, #d6dadf);
    border-radius: 6px;
    padding: 2px 6px;
    background: var(--s-panel-bg, #fff);
    color: inherit;
    font-weight: 600;
}
.s-pos-register .pos-parked {
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    font-size: 13px;
    cursor: pointer;
}
.s-pos-register .pos-parked.has-parked { border-color: #e65100; color: #e65100; font-weight: 600; }
.s-pos-register .pos-parked:disabled { opacity: .5; cursor: default; }
.s-pos-register .pos-parked-menu {
    position: absolute;
    z-index: 50;
    margin-top: 4px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #d6dadf);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    min-width: 220px;
    padding: 4px;
}
.s-pos-register .pos-parked-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.s-pos-register .pos-parked-item:hover { background: var(--s-body-bg, #eef1f4); }

/* Body: catalog (left) + sale (right) */
.s-pos-register .pos-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* Right (sale) pane is fluid: shrinks with the viewport instead of a hard 440px so the
       catalog keeps room at laptop 125%-zoom / narrow widths. Stacks on phones (see below). */
    grid-template-columns: minmax(0, 1fr) clamp(360px, 36vw, 560px);
    gap: 8px;
}
.s-pos-register .pos-catalog-host { min-height: 0; min-width: 0; display: flex; }
.s-pos-register .pos-sale {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    border-radius: 8px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #e3e6ea);
    padding: 12px;
}
/* Cart is the only flexible section; everything else keeps its natural height so the payment
   bar never gets squeezed into (and overlapping) the action buttons below it. */
.s-pos-register .pos-sale > *:not(.pos-cart-host) { flex-shrink: 0; }
.s-pos-register .pos-cart-host {
    flex: 1 1 auto;
    min-height: 84px;
    border-radius: 8px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #e3e6ea);
    overflow: hidden;
}
/* Empty-cart hint sits over the (empty) cart area; hidden once lines exist */
.s-pos-register .pos-cart-empty {
    display: none;
    text-align: center;
    color: var(--s-text-muted, #6c757d);
    font-size: 14px;
    margin: -8px 0 0;
    padding: 4px;
}
.s-pos-register.pos-cart-is-empty .pos-cart-empty { display: block; }

/* Payment bar */
.s-pos-register .pos-payment-host {
    border-radius: 8px;
    background: var(--s-body-bg, #f4f5f7);
    border: 1px solid var(--s-border-color, #e3e6ea);
    padding: 8px 12px;
    min-height: 56px;
}

/* Action buttons */
.s-pos-register .pos-actions {
    display: flex;
    gap: 8px;
}
.s-pos-register .pos-btn {
    flex: 1 1 0;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.s-pos-register .pos-btn .key {
    display: inline-block;
    min-width: 22px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--s-border-color, #e3e6ea);
    font-size: 12px;
    font-weight: 600;
}
.s-pos-register .pos-return.active {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}
/* Void clears the sale — flagged as destructive (muted red), filled on hover. */
.s-pos-register .pos-void { color: #c62828; }
.s-pos-register .pos-void .key { background: rgba(198, 40, 40, .18); color: #c62828; }
.s-pos-register .pos-void:hover { background: #c62828; border-color: #c62828; color: #fff; }
.s-pos-register .pos-void:hover .key { background: rgba(255, 255, 255, .25); color: #fff; }
.s-pos-register .pos-btn.primary {
    width: 100%;
    min-height: 60px;
    background: var(--s-primary, #2e7d32);
    border-color: var(--s-primary, #2e7d32);
    color: #fff;
    font-weight: 700;
    font-size: 19px;
}
.s-pos-register .pos-btn:hover { filter: brightness(0.97); }
.s-pos-register .pos-hint {
    text-align: center;
    color: var(--s-text-muted, #9aa0a6);
    font-size: 11.5px;
}

/* ── Product catalog (left pane) ─────────────────────────────────────────── */
.s-pos-register .pos-catalog {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.s-pos-register .pos-cats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    /* overflow must stay visible so a parent chip's dropdown can escape the chip row. Only the
       top-level categories show here now, so the row stays short without a scroll cap. */
    overflow: visible;
}
.s-pos-register .pos-cats:empty { display: none; }
.s-pos-register .pos-cat-chip {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.s-pos-register .pos-cat-chip.active {
    background: var(--s-primary, #2e7d32);
    border-color: var(--s-primary, #2e7d32);
    color: #fff;
    font-weight: 600;
}

/* ── Category dropdown chips (parents with subcategories) ─────────────────────── */
.s-pos-register .pos-cat-wrap { position: relative; display: inline-flex; }
.s-pos-register .pos-cat-chip.pos-cat-parent { display: inline-flex; align-items: center; gap: 5px; }
.s-pos-register .pos-cat-caret { font-size: 10px; line-height: 1; opacity: .7; }
.s-pos-register .pos-cat-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #d6dadf);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    padding: 4px;
}
.s-pos-register .pos-cat-dropdown[hidden] { display: none; }
.s-pos-register .pos-cat-dd-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
}
.s-pos-register .pos-cat-dd-item:hover { background: var(--s-body-bg, #eef1f4); }
.s-pos-register .pos-cat-dd-item.active {
    background: var(--s-primary, #2e7d32);
    color: #fff;
    font-weight: 600;
}
/* Clear-all — shown only while a category filter is applied */
.s-pos-register .pos-cat-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px dashed var(--s-border-color, #d6dadf);
    background: transparent;
    color: var(--s-text-muted, #6c757d);
    font-size: 13px;
    cursor: pointer;
}
.s-pos-register .pos-cat-clear:hover { border-color: #c62828; color: #c62828; }
.s-pos-register .pos-tiles-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-radius: 8px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #e3e6ea);
    padding: 10px;
}
.s-pos-register .pos-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}
.s-pos-register .pos-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--s-border-color, #e3e6ea);
    background: var(--s-body-bg, #f8f9fb);
    cursor: pointer;
    overflow: hidden;
    min-height: 128px;
    transition: transform .04s ease, box-shadow .12s ease;
}
.s-pos-register .pos-tile:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    border-color: var(--s-primary, #2e7d32);
}
.s-pos-register .pos-tile:active { transform: scale(.97); }
.s-pos-register .pos-tile-thumb {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg, #eef1f4);
    overflow: hidden;
}
.s-pos-register .pos-tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-pos-register .pos-tile-initials {
    font-size: 24px;
    font-weight: 700;
    color: #9aa6b2;
    letter-spacing: 1px;
}
.s-pos-register .pos-tile-name {
    flex: 1 1 auto;
    padding: 6px 8px 2px;
    font-size: 12.5px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s-pos-register .pos-tile-price {
    padding: 0 8px 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--s-primary, #2e7d32);
    font-variant-numeric: tabular-nums;
}
.s-pos-register .pos-tile-unpriced .pos-tile-price { color: var(--s-text-muted, #9aa0a6); font-weight: 600; }
.s-pos-register .pos-catalog-status {
    display: none;
    text-align: center;
    color: var(--s-text-muted, #6c757d);
    padding: 28px 8px;
    font-size: 14px;
}
.s-pos-register .pos-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-body-bg, #f4f5f7);
    cursor: pointer;
    font-size: 13px;
}
.s-pos-register.pos-catalog-loading .pos-tiles-scroll { opacity: .6; }

/* Scan / search box */
.s-pos-register .pos-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #e3e6ea);
}
.s-pos-register .pos-search i { opacity: .6; font-size: 18px; }
.s-pos-register .pos-search-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    font-size: 18px;
    padding: 6px 2px;
    color: inherit;
}
/* The inner input never draws its own focus decoration — the wrapper owns the focus ring. */
.s-pos-register .pos-search-input:focus,
.s-pos-register .pos-search-input:focus-visible {
    outline: 0;
    box-shadow: none;
}
/* Single clean focus ring on the box: recolour its own border instead of stacking an
   offset outline outside it (which read as two concentric borders). */
.s-pos-register .pos-search:focus-within {
    border-color: var(--s-primary, #2e7d32);
    box-shadow: 0 0 0 1px var(--s-primary, #2e7d32);
}
.s-pos-register .pos-search-input.pos-search-flash {
    background: rgba(198, 40, 40, .18);
    border-radius: 4px;
}
.s-pos-register .pos-no-session { color: #c62828; font-weight: 600; }

/* Cart grid cells */
.s-pos-register .pos-cart-host .slick-cell.pos-cell-del {
    cursor: pointer;
    color: #b0b3b8;
    font-size: 18px;
    font-weight: 700;
}
.s-pos-register .pos-cart-host .slick-cell.pos-cell-del:hover { color: #c62828; }
.s-pos-register .pos-cart-host .slick-cell.pos-cell-edit { background: rgba(46,125,50,.04); }

/* Totals panel */
.s-pos-register .pos-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}
.s-pos-register .pos-total-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
    font-size: 13.5px;
    border-bottom: 1px solid var(--s-border-color, #e3e6ea);
}
.s-pos-register .pos-total-row:last-child { border-bottom: none; }
.s-pos-register .pos-total-label { color: var(--s-text-muted, #6c757d); }
.s-pos-register .pos-total-usd { text-align: right; font-variant-numeric: tabular-nums; min-width: 80px; }
.s-pos-register .pos-total-lbp { text-align: right; font-variant-numeric: tabular-nums; min-width: 90px; color: var(--s-text-muted, #6c757d); font-size: 12px; }

/* TOTAL row — emphasised */
.s-pos-register .pos-total-row.grand {
    font-size: 16px;
    font-weight: 700;
    border-top: 2px solid var(--s-border-color, #e3e6ea);
    border-bottom: 2px solid var(--s-border-color, #e3e6ea);
    margin: 4px 0;
    padding: 6px 0;
}
.s-pos-register .pos-total-row.grand .pos-total-label { color: inherit; }
.s-pos-register .pos-total-row.grand .pos-total-usd { color: var(--s-primary, #2e7d32); }

/* Discount row — negative value, shown in muted red */
.s-pos-register .pos-total-row.pos-discount .pos-total-usd,
.s-pos-register .pos-total-row.pos-discount .pos-total-lbp { color: #c62828; }

/* Balance row — highlights what's still owed */
.s-pos-register .pos-total-row.balance .pos-total-usd,
.s-pos-register .pos-total-row.balance .pos-total-lbp { color: #e65100; font-weight: 600; }

/* Customer typeahead */
.s-pos-register .pos-customer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s-pos-register .pos-customer-label { color: var(--s-text-muted, #6c757d); font-size: 13px; white-space: nowrap; }
.s-pos-register .pos-customer-field { position: relative; flex: 1 1 auto; min-width: 0; }
/* "+" new-customer button — square, matches the input height */
.s-pos-register .pos-customer-add {
    flex: 0 0 auto;
    width: 38px;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    color: var(--s-text-muted, #6c757d);
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.s-pos-register .pos-customer-add:hover {
    border-color: var(--s-primary, #2e7d32);
    color: var(--s-primary, #2e7d32);
}
.s-pos-register .pos-customer-input {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    color: inherit;
    font-size: 14px;
}
.s-pos-register .pos-customer-chip {
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 4px 0 12px;
    border-radius: 8px;
    border: 1px solid var(--s-primary, #2e7d32);
    background: rgba(46,125,50,.08);
    font-weight: 600;
    font-size: 14px;
}
.s-pos-register .pos-customer-chip i { margin-right: 6px; opacity: .7; }
.s-pos-register .pos-customer-rm {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #b0b3b8;
    padding: 0 6px;
}
.s-pos-register .pos-customer-rm:hover { color: #c62828; }
.s-pos-register .pos-customer-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #d6dadf);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    padding: 4px;
}
.s-pos-register .pos-customer-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
}
.s-pos-register .pos-customer-item:hover { background: var(--s-body-bg, #eef1f4); }
.s-pos-register .pos-customer-item-name { font-size: 14px; }
.s-pos-register .pos-customer-item-sub { font-size: 12px; color: var(--s-text-muted, #6c757d); }
.s-pos-register .pos-customer-empty { padding: 10px; color: var(--s-text-muted, #6c757d); font-size: 13px; }

/* Payment bar */
.s-pos-register .pos-pay {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.s-pos-register .pos-pay-methods { display: flex; gap: 8px; flex-wrap: wrap; }
.s-pos-register .pos-tender,
.s-pos-register .pos-split {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    font-size: 14px;
    cursor: pointer;
}
.s-pos-register .pos-tender.active {
    background: var(--s-primary, #2e7d32);
    border-color: var(--s-primary, #2e7d32);
    color: #fff;
    font-weight: 600;
}
.s-pos-register .pos-pay-entry { display: flex; align-items: center; gap: 8px; }
.s-pos-register .pos-tendered {
    width: 130px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-panel-bg, #fff);
    font-size: 16px;
    text-align: right;
    color: inherit;
}
.s-pos-register .pos-quick { display: flex; gap: 6px; }
.s-pos-register .pos-quick-btn {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--s-border-color, #d6dadf);
    background: var(--s-body-bg, #f4f5f7);
    font-size: 13px;
    cursor: pointer;
}
.s-pos-register .pos-quick-btn.exact { font-weight: 600; }
.s-pos-register .pos-change {
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Split tender chips */
.s-pos-register .pos-tenders { display: flex; gap: 6px; flex-wrap: wrap; }
.s-pos-register .pos-tenders:empty { display: none; }
.s-pos-register .pos-tender-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border-radius: 14px;
    background: var(--s-body-bg, #eef1f4);
    border: 1px solid var(--s-border-color, #d6dadf);
    font-size: 13px;
}
.s-pos-register .pos-tender-rm {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: #b0b3b8;
}
.s-pos-register .pos-tender-rm:hover { color: #c62828; }

/* Return mode + negative (return) cart rows — used by later tasks */
.s-pos-register.pos-return-mode .pos-topbar { outline: 2px solid #c62828; }
.s-pos-register .slick-row.pos-return-row,
.s-pos-register .pos-return-row { color: #c62828; }

/* ── Return: button menu (receipt vs quick) ───────────────────────────────── */
.s-pos-register .pos-sale { position: relative; }
.s-pos-register .pos-return-menu {
    position: absolute;
    z-index: 50;
    margin-top: 4px;
    background: var(--s-panel-bg, #fff);
    border: 1px solid var(--s-border-color, #d6dadf);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    min-width: 240px;
    padding: 4px;
}
.s-pos-register .pos-return-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
}
.s-pos-register .pos-return-menu-item:hover { background: var(--s-body-bg, #eef1f4); }
.s-pos-register .pos-return-menu-item i { width: 18px; text-align: center; opacity: .7; }

/* ── Receipt-return modal ──────────────────────────────────────────────────── */
.pos-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.pos-modal {
    width: 560px;
    max-width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--s-card-solid-bg, #fff);
    color: var(--bs-body-color, #1d1d1f);
    border: 1px solid var(--bs-border-color, #e3e6ea);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    overflow: hidden;
}
.pos-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color, #e3e6ea);
}
.pos-modal-title { font-weight: 700; font-size: 16px; flex: 1 1 auto; }
.pos-modal-close, .pos-return-back {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
    padding: 2px 8px;
    border-radius: 6px;
}
.pos-modal-close:hover, .pos-return-back:hover { background: var(--bs-tertiary-bg, #eef1f4); }
.pos-modal-body { padding: 14px 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pos-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--bs-border-color, #e3e6ea);
}
.pos-modal-foot-spacer { flex: 1 1 auto; }
.pos-modal-foot .pos-btn { flex: 0 0 auto; min-width: 110px; }

.pos-return-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color, #e3e6ea);
    background: var(--bs-body-bg, #f8f9fb);
    margin-bottom: 10px;
}
.pos-return-search-row i { opacity: .6; }
.pos-return-search {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: inherit;
}
.pos-return-list { display: flex; flex-direction: column; gap: 6px; }
.pos-return-order {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--bs-border-color, #e3e6ea);
    background: var(--bs-body-bg, #f8f9fb);
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
}
.pos-return-order:hover { border-color: var(--s-primary, #2e7d32); }
.pos-return-order-no { font-weight: 700; }
.pos-return-order-meta { color: var(--bs-secondary-color, #6c757d); font-size: 12.5px; }
.pos-return-order-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-return-empty { text-align: center; color: var(--bs-secondary-color, #6c757d); padding: 24px; }

.pos-return-lines-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.pos-return-lines-head i { opacity: .7; margin-right: 4px; }
.pos-return-lines-hint { color: var(--bs-secondary-color, #6c757d); font-size: 12.5px; }
.pos-return-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--bs-border-color, #eef1f4);
}
.pos-return-line.picked { background: rgba(46,125,50,.06); border-color: rgba(46,125,50,.25); }
.pos-return-line.exhausted { opacity: .55; }
.pos-return-line-main { flex: 1 1 auto; min-width: 0; }
.pos-return-line-name { display: block; font-size: 14px; }
.pos-return-line-sub { display: block; color: var(--bs-secondary-color, #6c757d); font-size: 12px; }
.pos-return-line-done { color: var(--bs-secondary-color, #6c757d); font-size: 12.5px; font-style: italic; }
.pos-return-step { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pos-return-step button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color, #d6dadf);
    background: var(--s-card-solid-bg, #fff);
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.pos-return-step button:hover { border-color: var(--s-primary, #2e7d32); }
.pos-return-qty { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Hide the desktop-shell window-close ✕ on the register ─────────────────────
   The Windows-metaphor shell injects a #s-window-close ✕ into .s-main on every
   page. The register is a dedicated full-screen terminal (cashiers don't "close
   the window" — they hold/charge/return), so suppress it here. The shell's JS
   only toggles the button's inline display between 'none' and '' (empty), so this
   stylesheet rule always wins when it would otherwise be shown. */
.s-main:has(.s-pos-register) #s-window-close { display: none !important; }

/* ── Responsive: laptop 125%-zoom / tablet ───────────────────────────────────
   Two-pane stays, but tighten the sale pane, gaps and tiles so the catalog never
   gets squeezed on narrower CSS widths (a 1366px laptop at 125% zoom is ~1093px). */
@media (max-width: 1100px) {
    .s-pos-register .pos-root { padding: 6px; gap: 6px; }
    .s-pos-register .pos-body { grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 380px); gap: 6px; }
    .s-pos-register .pos-topbar { gap: 10px; padding: 6px 10px; font-size: 13px; }
    .s-pos-register .pos-sale { padding: 8px; gap: 6px; }
    .s-pos-register .pos-tiles { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
}

/* ── Responsive: phones / small tablets — stack the two panes vertically ──────
   The fixed-height two-column model can't fit a phone; switch to a single column
   in normal document flow and let the whole register scroll. The catalog tile
   area and the cart each get a sensible capped height so both stay usable. */
@media (max-width: 760px) {
    .s-pos-register { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .s-pos-register .pos-root { height: auto; min-height: 100%; }

    .s-pos-register .pos-topbar { flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
    .s-pos-register .pos-topbar .pos-clock { margin-left: auto; }

    .s-pos-register .pos-body { display: flex; flex-direction: column; gap: 8px; }
    .s-pos-register .pos-catalog-host { min-height: 0; }
    .s-pos-register .pos-catalog { min-height: 0; }
    /* Browse area: tall enough to scan products, capped so the sale stays reachable. */
    .s-pos-register .pos-tiles-scroll { max-height: 46vh; min-height: 220px; }
    .s-pos-register .pos-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    /* Cart was flex:1 of a fixed pane; in the stacked column give it real height. */
    .s-pos-register .pos-cart-host { min-height: 200px; }
}

/* ── Responsive: narrow phones — shrink the action/charge controls to fit ─────── */
@media (max-width: 400px) {
    .s-pos-register .pos-btn { font-size: 13px; padding: 0 8px; gap: 3px; }
    .s-pos-register .pos-btn .key { min-width: 18px; padding: 1px 4px; }
    .s-pos-register .pos-btn.primary { font-size: 17px; }
    .s-pos-register .pos-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .s-pos-register .pos-tendered { width: 110px; }
}

/* ── Responsive: short viewports (laptop 125%-zoom) — compress the sale chrome ──
   The sale pane stacks customer + cart + totals + payment + actions + CHARGE + hint.
   Only the cart flexes; everything else keeps natural height. On a short viewport
   (a 768px-tall laptop at 125% zoom is ~614 CSS px) the fixed parts overrun the pane
   and the CHARGE button / hint spill past the bottom. Tighten the fixed chrome — and
   let the cart yield more space — so the full pane (CHARGE included) always fits. */
@media (max-height: 760px) {
    .s-pos-register .pos-root { padding: 6px; gap: 6px; }
    .s-pos-register .pos-body { gap: 6px; }
    .s-pos-register .pos-topbar { padding: 5px 12px; }
    /* overflow-y guards the extreme case: if the chrome still can't fit, the pane scrolls
       rather than spilling the CHARGE button past the card / off-screen. */
    .s-pos-register .pos-sale { padding: 8px; gap: 6px; overflow-y: auto; }
    /* NOTE: do NOT pin a tiny cart height here — the cart is the flexible region and must
       keep growing to fill the pane (and stay multi-row) on short / zoomed viewports.
       The chrome below is compressed instead, and .pos-sale scrolls if it still can't fit. */
    .s-pos-register .pos-total-row { padding: 1px 0; font-size: 12.5px; }
    .s-pos-register .pos-total-row.grand { margin: 2px 0; padding: 4px 0; font-size: 15px; }
    .s-pos-register .pos-payment-host { min-height: 0; padding: 6px 10px; }
    .s-pos-register .pos-btn { min-height: 40px; }
    .s-pos-register .pos-btn.primary { min-height: 48px; font-size: 17px; }
}

/* Even shorter: drop the keyboard hint and trim the charge button further. */
@media (max-height: 600px) {
    .s-pos-register .pos-hint { display: none; }
    .s-pos-register .pos-customer-input,
    .s-pos-register .pos-customer-chip,
    .s-pos-register .pos-customer-add { min-height: 34px; }
    .s-pos-register .pos-btn { min-height: 38px; font-size: 14px; }
    .s-pos-register .pos-btn.primary { min-height: 44px; font-size: 16px; }
    .s-pos-register .pos-tender,
    .s-pos-register .pos-split,
    .s-pos-register .pos-tendered,
    .s-pos-register .pos-quick-btn { min-height: 36px; }
}