/* ============================================================================
   pos-page.css  —  POS Page-scoped styles
   ----------------------------------------------------------------------------
   Load via @vite or <link> in your Filament page view.
   All selectors are scoped under .rpos-* (POS UI), .pp-* (print UI) or .tr-*
   (thermal receipt) so they do not leak into the rest of the panel.

   Companion font (add to your layout <head> if not already present):
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

   ----------------------------------------------------------------------------
   ORGANISATION
   Sections follow the DOM order of menu-point-of-sale.blade.php so a class and
   everything that styles it live together:

     1.  Base + design tokens (:root / .dark)
     2.  Shell + body layout
     3.  Mode bar
     4.  Menu region — rail, search, categories, item grid, item cards
     5.  Bills view — order-type bar, bill cards, status pills
     6.  Cart panel — context, cart items / lines, totals, actions, utilities
     7.  Customer search dropdown
     8.  Modal shell (shared by all modals)
     9.  Modifier modal
     10. Payment / settle
     11. Void / Comp / Void-bill
     12. Split + Merge
     13. Thermal receipt
     14. REVIEW section (classes not used by this blade)
     15. POS print UI (.pp-*) — shared with the other POS page
     16. Responsive (container queries: reacts to the POS's real width)
     17. Print
     18. Keyframes

   MAINTENANCE NOTES
   - Duplicate rules from the old file + the tripled "ADDITIONS v3" banner were
     merged. Where a selector appeared twice, the two blocks were folded into one
     that yields the exact same computed result (later-wins per property), so
     nothing renders differently.
   - Removed the blocks the previous file's own comment flagged as superseded:
     .rpos-wrap (+ its grid), .rpos-menu, .rpos-line-top, .rpos-line-info,
     .rpos-line-controls, .rpos-fired-badge (+ @keyframes rpos-pulse).
   - Classes NOT referenced by menu-point-of-sale.blade.php are kept but tagged
     "REVIEW:" — search that token to audit. They are likely used by the second
     (shared) POS page; confirm before deleting.
   - Known gaps to fix elsewhere (not styled here):
       * blade uses `.btn-outline` on the receipt "Print Receipt" button, but no
         .btn-outline rule exists — add one or switch it to .rpos-btn.
       * `--rpos-line-fired-bd` is defined only in .dark, so `.rpos-line.fired`
         has no border-colour token in light mode. Add it to :root if wanted.
       * blade's inline <style> sets `.rpos-actions { flex-direction: column }`,
         which overrides the row layout defined here. Left as-is on purpose.
   ============================================================================ */


/* ============================================================================
   1. BASE + DESIGN TOKENS
   ============================================================================ */

[x-cloak] { display: none !important; }

:root {
    --rpos-bg:           #f5f5f4;
    --rpos-card:         #ffffff;
    --rpos-border:       #e7e5e4;
    --rpos-text:         #1c1917;
    --rpos-text-muted:   #78716c;
    --rpos-text-faint:   #a8a29e;
    --rpos-primary:      #2563eb;
    --rpos-primary-soft: #dbeafe;
    --rpos-success:      #16a34a;
    --rpos-success-soft: #dcfce7;
    --rpos-warning:      #d97706;
    --rpos-warning-soft: #fef3c7;
    --rpos-danger:       #dc2626;
    --rpos-danger-soft:  #fee2e2;
    --rpos-fire:         #ea580c;
    --rpos-fire-soft:    #fff7ed;
    --rpos-radius:       10px;
    --rpos-shadow:       0 1px 3px rgba(0,0,0,.06);

    /* Cart-line tokens */
    --rpos-line-bg:           #ffffff;
    --rpos-line-bg-hover:     #f8faff;
    --rpos-line-fired-bg:     #f0fdf4;   /* de-duplicated (was declared twice) */
    --rpos-line-voided-bg:    #fef2f2;
    --rpos-line-comped-bg:    #fffbeb;
    --rpos-line-radius:       12px;
    --rpos-line-shadow:       0 1px 4px rgba(0,0,0,.05);
    --rpos-line-shadow-hover: 0 4px 16px rgba(37,99,235,.10);
    /* NOTE: --rpos-line-fired-bd is intentionally absent here; see header. */
}

.dark {
    --rpos-bg:           #1c1917;
    --rpos-card:         #292524;
    --rpos-border:       #44403c;
    --rpos-text:         #fafaf9;
    --rpos-text-muted:   #a8a29e;
    --rpos-text-faint:   #78716c;
    --rpos-primary-soft: #1e3a5f;
    --rpos-success-soft: #14532d;
    --rpos-warning-soft: #451a03;
    --rpos-danger-soft:  #450a0a;
    --rpos-fire-soft:    #431407;
    --rpos-shadow:       0 1px 3px rgba(0,0,0,.2);

    --rpos-line-bg:        #292524;
    --rpos-line-bg-hover:  #312e2b;
    --rpos-line-fired-bg:  #14532d22;
    --rpos-line-fired-bd:  #16a34a55;
    --rpos-line-voided-bg: #450a0a22;
    --rpos-line-comped-bg: #451a0322;
}


/* ============================================================================
   2. SHELL + BODY LAYOUT
   One fixed-height frame; children scroll, the page itself does not.
   Tune the 150px if a page scrollbar/gap appears: it must equal the Filament
   topbar + page title + page padding. Larger = safer (small gap beats scroll).
   ============================================================================ */

.rpos-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Never shorter than 420px, so a very short window scrolls the page instead
       of squeezing the POS to nothing. */
    height: max(calc(100dvh - 150px), 420px);
    overflow: hidden;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--rpos-text);
    /* The layout below reacts to the width the POS REALLY has (which changes
       when the panel sidebar opens or closes), not to the browser width.
       See section 16. */
    container-type: inline-size;
    container-name: rpos-shell;
}

.rpos-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;   /* fallback; refined in section 16 */
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.rpos-left {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    container-type: inline-size;
    container-name: rpos-left;
}

/* Phone-width pane switch (menu <-> order). Hidden unless section 16 shows it.
   A checkbox, so it needs no script and survives page updates. */
.rpos-pane-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.rpos-panebar {
    display: none;
    order: 1;                       /* sits below .rpos-body */
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: var(--rpos-radius);
    background: var(--rpos-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.rpos-panebar:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.rpos-cart {
    display: flex;
    flex-direction: column;
    background: var(--rpos-card);
    border: 1px solid var(--rpos-border);
    border-radius: var(--rpos-radius);
    overflow: hidden;
    height: 100%;
    min-height: 0;
}

/* ============================================================================
   3. MODE BAR  (Menu / Bills switch)
   ============================================================================ */

.rpos-modebar {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--rpos-border);
    border-radius: var(--rpos-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.rpos-mode {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border: none;
    background: var(--rpos-card);
    color: var(--rpos-text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.rpos-mode + .rpos-mode { border-left: 1px solid var(--rpos-border); }
.rpos-mode:hover  { color: var(--rpos-primary); }
.rpos-mode.active { background: var(--rpos-primary); color: #fff; }

.rpos-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--rpos-danger);
    border-radius: 9px;
}
.rpos-mode.active .rpos-mode-badge { background: rgba(255,255,255,.25); }


/* ============================================================================
   4. MENU REGION
   Two-column grid: menu rail (left) + menu main (right). Rail and item grid
   each scroll independently; the region stays full height.
   ============================================================================ */

.rpos-menu-region {
    display: grid;
    grid-template-columns: 108px 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    height: 100%;
    min-height: 0;
}

/* ── Menu rail ──────────────────────────────────────────────────────────── */
.rpos-menu-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--rpos-border) transparent;
}

.rpos-rail-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rpos-text);
    padding: 2px 4px 4px;
    flex-shrink: 0;
}
.rpos-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    border: 1px solid var(--rpos-border);
    background: var(--rpos-card);
    color: var(--rpos-text);
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
    transition: border-color .12s, background .12s, color .12s;
}
.rpos-rail-item:hover { border-color: var(--rpos-primary); color: var(--rpos-primary); }
.rpos-rail-item.active {
    border-color: var(--rpos-primary);
    background: var(--rpos-primary-soft);
    color: var(--rpos-primary);
}
.rpos-rail-ic { display: flex; align-items: center; justify-content: center; }
.rpos-rail-ic svg { width: 24px; height: 24px; }
.rpos-rail-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rpos-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.rpos-rail-item:hover .rpos-rail-name  { color: var(--rpos-primary); }
.rpos-rail-item.active .rpos-rail-name { color: var(--rpos-primary); }

/* ── Menu main (search + categories + grid stack) ───────────────────────── */
.rpos-menu-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Search */
.rpos-search { position: relative; }
.rpos-search input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--rpos-border);
    border-radius: var(--rpos-radius);
    background: var(--rpos-card);
    font-size: 14px;
    color: var(--rpos-text);
    outline: none;
    transition: border-color .15s;
}
.rpos-search input:focus { border-color: var(--rpos-primary); }
.rpos-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rpos-text-faint);
    font-size: 16px;
}

/* Category pills + scroll arrows */
.rpos-cats-wrap { display: flex; align-items: center; gap: 4px; }
.rpos-cats {
    display: flex;
    flex: 1;                 /* arrows stay at the two ends of the row */
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.rpos-cats::-webkit-scrollbar { display: none; }
.rpos-cat {
    flex-shrink: 0;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid var(--rpos-border);
    background: var(--rpos-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--rpos-text);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.rpos-cat:hover  { border-color: var(--rpos-primary); color: var(--rpos-primary); }
.rpos-cat.active { background: var(--rpos-primary); border-color: var(--rpos-primary); color: #fff; }
.rpos-cats-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--rpos-border);
    background: var(--rpos-card);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rpos-text);
    transition: all .15s;
}
.rpos-cats-arrow:hover { border-color: var(--rpos-primary); color: var(--rpos-primary); }

/* ── Item grid ──────────────────────────────────────────────────────────── */
.rpos-grid {
    display: grid;
    /* min(150px, 100%): a column can never be wider than the grid itself, so
       there is no sideways scrolling in a narrow space. */
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    grid-auto-rows: 160px;                 /* fixed row height, adjust to taste */
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
    padding-right: 4px;
    align-content: start;
    /* Thin scrollbar in the POS colours, instead of the wide system one. */
    scrollbar-width: thin;
    scrollbar-color: var(--rpos-border) transparent;
}

/* Grid cell wrapper — display:contents lets the grid size the card directly */
.rpos-item-wrap { display: contents; }

/* ── Item card ──────────────────────────────────────────────────────────── */
.rpos-item {
    position: relative;
    background: var(--rpos-card);
    border: 1px solid var(--rpos-border);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    overflow: hidden;              /* clips the image corners */
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    align-self: stretch;           /* fill grid cell */
    height: 100%;                  /* fill the row height */
    transition: border-color .15s, box-shadow .15s, transform .08s;
    box-sizing: border-box;
}
.rpos-item:hover {
    border-color: var(--rpos-primary);
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
}
.rpos-item:active { transform: scale(.98); }       /* the tap is felt */
.rpos-item.unavailable:hover  { border-color: var(--rpos-border); box-shadow: none; }
.rpos-item.unavailable:active { transform: none; }
.rpos-item.unavailable { opacity: .45; cursor: not-allowed; }

/* No-image card variant */
.rpos-item.rpos-item-no-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px;
    height: 100%;
}
.rpos-item-no-img-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    width: 100%;
    padding: 12px;
    text-align: center;
}
.rpos-item-name-lg {
    font-size: 16px;
    font-weight: 700;
    color: var(--rpos-text);
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rpos-item-no-img-body .rpos-item-amount { font-size: 13px; font-weight: 700; color: var(--rpos-text); }
.rpos-item-no-img-body .rpos-item-has-mods { margin-top: 0; }

/* Image */
.rpos-item-img,
.rpos-item-emoji {                 /* REVIEW: .rpos-item-emoji not used in this blade */
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    margin: 0;
}

/* Name + price */
.rpos-item-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rpos-text);
    padding: 6px 8px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
}
.rpos-item-price {
    font-size: 12px;
    font-weight: 500;
    color: var(--rpos-text);
    padding: 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.rpos-item-amount { font-weight: 600; }
.rpos-item-has-mods {
    font-size: 9px;
    font-weight: 600;
    color: var(--rpos-primary);
    background: var(--rpos-primary-soft);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dietary badges on a card (the blade prints them; they had no style before) */
.rpos-item-badges {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: none;
}
.rpos-badge {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--rpos-card);
    color: var(--rpos-text);
    border: 1px solid var(--rpos-border);
}

/* SVG placeholder for image-less cells */
.rpos-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rpos-text-faint);
    background: var(--rpos-bg);
}
.rpos-item-placeholder svg { opacity: .5; }

/* REVIEW: in-cart / badge / incart states below are not applied by this blade */
.rpos-item.in-cart {
    border-color: var(--rpos-primary);
    box-shadow: 0 2px 8px rgba(37,99,235,.12);
    outline: 2px solid var(--rpos-primary-soft);
    outline-offset: 0px;
}
.rpos-item.in-cart:hover {
    border-color: var(--rpos-primary);
    box-shadow: 0 4px 16px rgba(37,99,235,.18);
    outline: 2px solid var(--rpos-primary-soft);
}
.dark .rpos-item.in-cart {
    border-color: var(--rpos-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,.3);
}
.rpos-item-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: var(--rpos-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
    outline: 2px solid var(--rpos-card);
}
.rpos-item-incart {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rpos-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   5. BILLS VIEW  (full-width card grid)
   ============================================================================ */

.rpos-bills-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Order-type bar — base, then the bills-view + inline variants that reuse it */
.rpos-otype {
    display: flex;
    border-bottom: 1px solid var(--rpos-border);
}
.rpos-bills-view .rpos-otype {
    border: 1px solid var(--rpos-border);
    border-radius: var(--rpos-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.rpos-otype-inline {
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    overflow: hidden;
}
.rpos-otype-inline .rpos-otype-btn { padding: 8px 6px; }

.rpos-otype-btn {
    flex: 1;
    position: relative;
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--rpos-text);
    transition: all .15s;
    border-bottom: 2px solid transparent;
}
.rpos-otype-btn.active {
    color: var(--rpos-primary);
    border-bottom-color: var(--rpos-primary);
    background: var(--rpos-primary-soft);
}
.rpos-otype-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--rpos-danger);
    border-radius: 9px;
}

/* Bill search */
.rpos-bills-search { padding: 0 12px 8px; flex-shrink: 0; }

/* Bill card grid */
.rpos-bills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 10px;
    overflow-y: auto;
    align-content: start;
    padding-bottom: 12px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rpos-border) transparent;
}
.rpos-bill-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--rpos-border);
    border-radius: 12px;
    background: var(--rpos-card);
    color: var(--rpos-text);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--rpos-shadow);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.rpos-bill-card:hover  { border-color: var(--rpos-primary); box-shadow: 0 3px 12px rgba(37,99,235,.12); }
.rpos-bill-card.active {
    border-color: var(--rpos-primary);
    background: rgba(37,99,235,.08);
    box-shadow: 0 0 0 1px var(--rpos-primary);
}
.rpos-bill-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rpos-bill-card-top .rpos-bill-number { font-size: 13px; font-weight: 700; }
.rpos-bill-card-top .rpos-bill-total  { font-size: 14px; font-weight: 800; }
.rpos-bill-card-meta { font-size: 12px; color: var(--rpos-text-muted); }
.rpos-bill-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.rpos-bill-sched     { font-size: 11px; font-weight: 600; color: var(--rpos-fire); }

/* Status pills */
.rpos-status           { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.rpos-status-pending   { background: var(--rpos-warning-soft); color: var(--rpos-warning); }
.rpos-status-confirmed { background: var(--rpos-primary-soft); color: var(--rpos-primary); }
.rpos-status-preparing { background: var(--rpos-fire-soft);    color: var(--rpos-fire); }
.rpos-status-ready     { background: var(--rpos-success-soft); color: var(--rpos-success); }

/* Empty state (shared by bills grid + online grid) */
.rpos-bills-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--rpos-text-muted); }


/* ============================================================================
   6. CART PANEL  (persistent right column)
   Header/context/totals/actions are fixed; only the item list scrolls.
   ============================================================================ */

/* Merged from two prior .rpos-cart blocks (height:85% -> 100% was the winner) */

/* ── Shared input (used in cart context + several modals) ───────────────── */
.rpos-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    background: var(--rpos-bg);
    font-size: 13px;
    color: var(--rpos-text);
    outline: none;
}
.rpos-input:focus { border-color: var(--rpos-primary); }

/* ── Order context (collapsing chip + edit fields) ─────────────────────── */
/* Merged from two prior .rpos-context blocks: padding:0 + flex-shrink:0 win,
   the border-bottom / flex-column / gap from the first block still apply. */
.rpos-context {
    padding: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--rpos-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rpos-context label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rpos-text);
}
.rpos-context-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--rpos-border);
    background: var(--rpos-bg);
    color: var(--rpos-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.rpos-context-chip:hover { background: var(--rpos-primary-soft); }
.rpos-context-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpos-context-chip svg  { flex-shrink: 0; color: var(--rpos-text-muted); }
.rpos-context-fields {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rpos-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rpos-ctx-done {
    align-self: flex-end;
    border: 1px solid var(--rpos-border);
    background: var(--rpos-bg);
    color: var(--rpos-text);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Cart items scroll area ─────────────────────────────────────────────── */
/* Merged from two prior .rpos-cart-items blocks (flex:1 1 auto is the winner). */
.rpos-cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--rpos-border) transparent;
}

/* Empty state */
.rpos-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--rpos-text-muted);
    gap: 6px;
}
.rpos-cart-empty-icon { font-size: 40px; margin-bottom: 4px; opacity: .6; }

/* ── Cart line (single-row compact) ─────────────────────────────────────── */
/* Merged from two prior .rpos-line blocks: v3 padding/border-radius/flex-shrink
   win; background/border/box-shadow/transition/position/overflow/cursor kept. */
.rpos-line {
    background: var(--rpos-line-bg);
    border: 1px solid var(--rpos-border);
    border-radius: 10px;
    padding: 7px 9px;
    box-shadow: var(--rpos-line-shadow);
    transition: box-shadow .15s, border-color .15s, background .15s, opacity .2s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

/* Left accent stripe */
.rpos-line::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    opacity: .25;
    background: #2563eb;
    border-radius: 2px 0 0 2px;
    transition: opacity .2s, background .15s;
}
.dark .rpos-line::before { opacity: .25; background: #22c55e; }

/* Hover — blue (light) / green (dark) */
.rpos-line:hover {
    background: var(--rpos-line-bg-hover);
    box-shadow: var(--rpos-line-shadow-hover);
    border-color: #2563eb;
    border-width: 1.5px;
}
.rpos-line:hover::before { opacity: 1; background: #2563eb; width: 2px; }
.dark .rpos-line:hover { border-color: #22c55e; border-width: 1.5px; }
.dark .rpos-line:hover::before { opacity: 1; background: #22c55e; width: 2px; }

/* Fired state */
.rpos-line.fired {
    background: var(--rpos-line-fired-bg);
    border-color: var(--rpos-line-fired-bd);       /* light-mode token missing; see header */
}
.rpos-line.fired::before { opacity: 0; }
.rpos-line.fired:hover::before { background: #16a34a; opacity: 1; width: 3px; }
.dark .rpos-line.fired:hover { border-color: #22c55e; }
.dark .rpos-line.fired:hover::before { background: #22c55e; opacity: 1; width: 3px; }

/* Voided state */
.rpos-line.voided {
    background: var(--rpos-line-voided-bg);
    border-color: #fecaca;
    opacity: .75;
}
.rpos-line.voided::before { background: var(--rpos-danger); opacity: 1; }

/* Comped state */
.rpos-line.comped {
    background: var(--rpos-line-comped-bg);
    border-color: #fde68a;
    opacity: .8;
}
.rpos-line.comped::before { background: var(--rpos-warning); opacity: 1; }

/* Line inner layout */
.rpos-line-main { display: flex; align-items: center; gap: 8px; }
.rpos-line-num {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rpos-bg);
    border: 1px solid var(--rpos-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--rpos-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rpos-line-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
/* Merged from two prior .rpos-line-name blocks (font-weight 600 wins). */
.rpos-line-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rpos-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.rpos-line-qty { font-size: 12px; font-weight: 600; color: var(--rpos-text-muted); flex-shrink: 0; }

/* Merged from two prior .rpos-line-price blocks (v3 weight/colour win). */
.rpos-line-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--rpos-text);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
    letter-spacing: -.3px;
}
.rpos-line-price.line-through {
    text-decoration: line-through;
    opacity: .55;
    color: var(--rpos-text-muted);
}

/* Adjustment badges on the name */
.rpos-adj-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    text-decoration: none;
}
.rpos-adj-void { background: var(--rpos-danger);  color: #fff; }
.rpos-adj-comp { background: var(--rpos-warning); color: #000; }
.line-through  { text-decoration: line-through; }

/* Right cluster: qty stepper OR void/comp, on the amount row */
.rpos-line-adj { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.rpos-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1.5px solid var(--rpos-border);
    background: var(--rpos-bg);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rpos-text);
    transition: all .12s;
    line-height: 1;
}
.rpos-qty-btn:hover { border-color: var(--rpos-primary); background: var(--rpos-primary-soft); color: var(--rpos-primary); }
 
.rpos-line .rpos-qty-btn { width: 25px; height: 25px; font-size: 17px; }


.rpos-qty-num {
    font-size: 13px;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
    color: var(--rpos-text);
}

.rpos-void-btn,
.rpos-comp-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    border: 1.5px solid;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.rpos-void-btn { border-color: var(--rpos-danger);  color: var(--rpos-danger);  background: transparent; }
.rpos-void-btn:hover { background: var(--rpos-danger-soft); }
.rpos-comp-btn { border-color: var(--rpos-warning); color: var(--rpos-warning); background: transparent; }
.rpos-comp-btn:hover { background: var(--rpos-warning-soft); }
/* Void / Comp sized to match the 36px edit + remove buttons */
.rpos-line-adj .rpos-void-btn,
.rpos-line-adj .rpos-comp-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Modifier sub-lines */
/* Merged from two prior .rpos-line-mods blocks (v3 values win). */
.rpos-line-mods {
    padding-left: 28px;
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 64px;
    overflow-y: auto;
}
.rpos-line-mods::-webkit-scrollbar { width: 2px; }
.rpos-line-mods::-webkit-scrollbar-thumb { background: var(--rpos-border); border-radius: 4px; }
/* Merged from two prior .rpos-line-mod blocks. */
.rpos-line-mod {
    font-size: 11px;
    color: var(--rpos-text-muted);
    display: flex;
    justify-content: flex-start;   /* was space-between — keeps the delta beside the name, not at the far right */
    align-items: center;
    gap: 6px;
    padding: 1px 0;
}
.rpos-line-mod-delta { color: var(--rpos-warning); font-weight: 700; font-size: 11px; }
.rpos-bill-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--rpos-text-muted);
}

.rpos-bill-card-meta-main {
    flex: 1 1 auto;       /* fill the row so the server is pushed to the far right */
    min-width: 0;
}

.rpos-bill-card-server {
    flex: 0 0 auto;       /* never shrink — name stays whole at the right edge */
    white-space: nowrap;
    color: #2563eb;       /* blue, to stand out from the muted meta text */
    font-weight: 600;
}
/* ── Totals ─────────────────────────────────────────────────────────────── */
.rpos-totals {
    padding: 12px 14px;
    border-top: 1px solid var(--rpos-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rpos-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--rpos-text-muted);
}
.rpos-total-row.grand {
    font-size: 18px;
    font-weight: 800;
    color: var(--rpos-text);
    margin-top: 4px;
    padding-top: 8px;
    border-top: 2px solid var(--rpos-border);
}

/* ── Action buttons ─────────────────────────────────────────────────────── */
/* NOTE: blade's inline <style> overrides flex-direction to column here. */
.rpos-actions {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--rpos-border);
}
.rpos-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--rpos-radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rpos-btn:disabled { opacity: .4; cursor: not-allowed; }
.rpos-btn-fire   { background: var(--rpos-fire);    color: #fff; }
.rpos-btn-fire:hover:not(:disabled)   { background: #c2410c; }
.rpos-btn-settle { background: var(--rpos-success); color: #fff; }
.rpos-btn-settle:hover:not(:disabled) { background: #15803d; }
.rpos-btn-void   { background: var(--rpos-danger);  color: #fff; border: none; }
.rpos-btn-comp   { background: var(--rpos-warning); color: #000; border: none; }
.rpos-btn-block  { width: 100%; }   /* full-width primary action (from blade inline .rpos-actions) */

/* REVIEW: .rpos-btn-new / -secondary / .rpos-actions-secondary not used here */
.rpos-btn-new { background: var(--rpos-bg); color: var(--rpos-text); border: 1px solid var(--rpos-border); }
.rpos-actions-secondary { display: flex; gap: 6px; }
.rpos-btn-secondary {
    background: transparent;
    color: var(--rpos-text);
    border: 1px solid var(--rpos-border);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rpos-btn-secondary:hover { border-color: var(--rpos-primary); background: rgba(37,99,235,.06); }

/* ── Compact utility row (Print / Split / Merge / Void / New) ───────────── */
.rpos-util-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rpos-util {
    flex: 1 1 auto;
    min-width: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    background: transparent;
    color: var(--rpos-text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rpos-util svg { width: 14px; height: 14px; flex-shrink: 0; }
.rpos-util:hover { border-color: var(--rpos-primary); background: rgba(37,99,235,.06); }
.rpos-util-danger { color: var(--rpos-danger); border-color: var(--rpos-danger); }
.rpos-util-danger:hover { background: var(--rpos-danger-soft); }
.rpos-util-new { color: var(--rpos-text-muted); }


/* ============================================================================
   7. CUSTOMER SEARCH DROPDOWN
   ============================================================================ */

.rpos-cust-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--rpos-card);
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    box-shadow: var(--rpos-shadow);
    z-index: 20;
    max-height: 180px;
    overflow-y: auto;
}
.rpos-cust-row {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--rpos-border);
    transition: background .1s;
}
.rpos-cust-row:last-child { border-bottom: none; }
.rpos-cust-row:hover { background: var(--rpos-primary-soft); }
.rpos-cust-name   { font-weight: 600; }
.rpos-cust-detail { font-size: 11px; color: var(--rpos-text-muted); }


/* ============================================================================
   8. MODAL SHELL  (shared by every .rpos modal)
   ============================================================================ */

.rpos-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rpos-modal {
    background: var(--rpos-card);
    border-radius: var(--rpos-radius);
    width: 420px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rpos-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rpos-border);
    flex-shrink: 0;
}
.rpos-modal-body   { flex: 1; overflow-y: auto; padding: 16px 20px; }
.rpos-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--rpos-border);
    flex-shrink: 0;
    background: var(--rpos-card);
}
.rpos-modal-close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--rpos-text-muted); }


/* ============================================================================
   9. MODIFIER MODAL
   ============================================================================ */

.rpos-mod-qty { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.rpos-mod-qty label { font-size: 13px; font-weight: 600; }

.rpos-mod-group      { margin-bottom: 16px; }
.rpos-mod-group-name { font-size: 14px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.rpos-mod-required   { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--rpos-danger-soft); color: var(--rpos-danger); font-weight: 700; }
.rpos-mod-optional   { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: var(--rpos-bg); color: var(--rpos-text-muted); font-weight: 600; }

.rpos-mod-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 1px solid var(--rpos-border);
    cursor: pointer;
    transition: all .12s;
}
.rpos-mod-option:hover    { border-color: var(--rpos-primary); }
.rpos-mod-option.selected { background: var(--rpos-primary-soft); border-color: var(--rpos-primary); }
.rpos-mod-opt-name  { font-size: 13px; font-weight: 500; }
.rpos-mod-opt-price { font-size: 13px; font-weight: 600; color: var(--rpos-warning); }


/* ============================================================================
   10. PAYMENT / SETTLE
   ============================================================================ */

.rpos-pay-methods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rpos-pay-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--rpos-border);
    background: var(--rpos-bg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: var(--rpos-text);
}
.rpos-pay-btn.active { background: var(--rpos-primary); border-color: var(--rpos-primary); color: #fff; }


/* ============================================================================
   11. VOID / COMP / VOID-BILL MODALS
   ============================================================================ */

.rpos-vc-item-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0,0,0,.02);
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
}
.rpos-vc-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rpos-text-muted);
    margin-bottom: 6px;
}
.rpos-pin-input {
    -webkit-text-security: disc;
    text-security: disc;
    letter-spacing: 6px;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}


/* ============================================================================
   12. SPLIT + MERGE MODALS
   ============================================================================ */

.rpos-split-items,
.rpos-merge-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }

.rpos-split-item,
.rpos-merge-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rpos-split-item:hover,
.rpos-merge-item:hover     { border-color: var(--rpos-primary); background: rgba(37,99,235,.04); }
.rpos-split-item.selected,
.rpos-merge-item.selected  { border-color: var(--rpos-primary); background: rgba(37,99,235,.10); }

.rpos-split-item-check,
.rpos-merge-item-check { flex-shrink: 0; width: 20px; text-align: center; padding-top: 1px; font-size: 14px; }
.rpos-split-item-info,
.rpos-merge-item-info  { flex: 1; min-width: 0; }
.rpos-split-item-name  { font-size: 13px; font-weight: 600; }
.rpos-split-item-price { flex-shrink: 0; font-size: 13px; font-weight: 700; }


/* ============================================================================
   13. THERMAL RECEIPT
   ============================================================================ */

.thermal-receipt-modal { max-width: 420px; }
.thermal-receipt {
    width: 72mm;
    background: #fff;
    color: #000;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 12px 8px;
    margin: 12px auto;
    box-shadow: 0 0 8px rgba(0,0,0,.15);
}
.thermal-receipt.58mm { width: 52mm; font-size: 10px; }
.thermal-receipt.80mm { width: 72mm; font-size: 12px; }

.rpos-thermal-size {
    padding: 3px 8px;
    border: 1px solid var(--rpos-border);
    border-radius: 4px;
    background: transparent;
    color: var(--rpos-text);
    font-size: 11px;
    cursor: pointer;
}
.rpos-thermal-size.active { background: var(--rpos-primary); border-color: var(--rpos-primary); color: #fff; }

.tr-header      { text-align: center; margin-bottom: 4px; }
.tr-biz-name    { font-size: 16px; font-weight: 700; }
.thermal-receipt.58mm .tr-biz-name { font-size: 13px; }
.tr-biz-detail  { font-size: 10px; color: #666; }
.tr-divider     { border-top: 1px solid #000; margin: 6px 0; }
.tr-divider.dashed { border-top-style: dashed; }
.tr-divider.thin   { border-top-width: .5px; margin: 3px 0; }
.tr-row         { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; font-size: 11px; }
.thermal-receipt.58mm .tr-row { font-size: 9px; }
.tr-bold        { font-weight: 700; }
.tr-total       { font-size: 14px; font-weight: 700; padding: 4px 0; }
.thermal-receipt.58mm .tr-total { font-size: 12px; }

.tr-item-header { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 0; }
.tr-item-header span:first-child  { flex: 1; }
.tr-item-header span:nth-child(2) { width: 30px; text-align: center; }
.tr-item-header span:last-child   { width: 55px; text-align: right; }

.tr-item        { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11px; }
.thermal-receipt.58mm .tr-item { font-size: 9px; }
.tr-item-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-item-qty    { width: 30px; text-align: center; flex-shrink: 0; }
.tr-item-amount { width: 55px; text-align: right; flex-shrink: 0; }
.tr-item-mod    { display: flex; justify-content: space-between; font-size: 9px; color: #555; padding-left: 8px; }
.thermal-receipt.58mm .tr-item-mod { font-size: 8px; }
.tr-footer      { text-align: center; font-size: 10px; margin-top: 4px; color: #444; }


/* ============================================================================
   14. REVIEW SECTION — classes NOT referenced by menu-point-of-sale.blade.php.
   Kept because the print CSS is shared with the second POS page; that page may
   still use these. Confirm against it, then delete any that are truly dead.
   ============================================================================ */

/* Legacy non-thermal receipt */
.rpos-receipt          { text-align: center; }
.rpos-receipt-icon     { font-size: 48px; margin-bottom: 8px; }
.rpos-receipt-num      { font-size: 14px; color: var(--rpos-text-muted); margin-bottom: 12px; }
.rpos-receipt-items    { text-align: left; margin: 12px 0; }
.rpos-receipt-item     { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--rpos-border); }
.rpos-receipt-item-mods{ padding-left: 16px; font-size: 11px; color: var(--rpos-text-muted); }
.rpos-receipt-total    { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--rpos-border); }

/* Open-tabs strip (superseded here by the bills card grid) */
.rpos-tabs-strip {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--rpos-border);
    scrollbar-width: none;
    background: var(--rpos-bg);
}
.rpos-tabs-strip::-webkit-scrollbar { display: none; }
.rpos-tab-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--rpos-card);
    border: 1px solid var(--rpos-border);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.rpos-tab-chip:hover  { border-color: var(--rpos-primary); }
.rpos-tab-chip.active  { border-color: var(--rpos-primary); color: var(--rpos-primary); background: var(--rpos-primary-soft); }
.dark .rpos-tab-chip.active { box-shadow: 0 0 0 3px rgba(37,99,235,.35); }
.rpos-tab-chip .tab-total { font-weight: 400; color: var(--rpos-text-muted); margin-left: 4px; }

/* Edit button */
/* Edit (pencil) — bigger touch target */
.rpos-edit-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--rpos-border);
    background: var(--rpos-primary-soft);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .1s;
}
.rpos-edit-btn:hover { border-color: var(--rpos-primary); }

/* Delete (trash) — bigger touch target */
.rpos-line-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    background: transparent;
    color: var(--rpos-text-faint);
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}
.rpos-line-remove:hover { color: var(--rpos-danger); border-color: var(--rpos-danger); background: var(--rpos-danger-soft); }


 

 




.rpos-line-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-left: 28px;   /* aligns under the name, clearing the num circle like .rpos-line-mods does */
}

.rpos-line-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;      /* was 6px — pulls the stepper up tighter under the name */
    padding-left: 28px;
}
/* Edit (pencil) in a cart line — matches the .rpos-line-edit class used in the blade */
.rpos-line-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    background: var(--rpos-primary-soft);
    color: var(--rpos-primary);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.rpos-line-edit:hover { border-color: var(--rpos-primary); }
/* Collapsible bills section + list-style bill rows (this blade uses cards) */
.rpos-bills-section { border-bottom: 1px solid var(--rpos-border); }
.rpos-bills-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--rpos-text);
    font-size: 13px;
    font-weight: 600;
}
.rpos-bills-toggle:hover { background: rgba(0,0,0,.02); }
.rpos-bills-toggle-label { display: flex; align-items: center; gap: 8px; }
.rpos-bills-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--rpos-primary);
    border-radius: 10px;
}
.rpos-bills-toggle-arrow { font-size: 16px; font-weight: 700; transition: transform .2s ease; }
.rpos-bills-toggle-arrow.open { transform: rotate(90deg); }
.rpos-bills-list { max-height: 220px; overflow-y: auto; padding: 0 8px 8px; }

.rpos-bill-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--rpos-border);
    border-radius: 8px;
    background: var(--rpos-bg);
    cursor: pointer;
    color: var(--rpos-text);
    text-align: left;
    transition: border-color .15s, background .15s;
}
.rpos-bill-row:hover  { border-color: var(--rpos-primary); background: rgba(37,99,235,.04); }
.rpos-bill-row.active { border-color: var(--rpos-primary); background: rgba(37,99,235,.10); }
.rpos-bill-row-left  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpos-bill-number    { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpos-bill-meta      { font-size: 11px; color: var(--rpos-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpos-bill-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.rpos-bill-total     { font-size: 13px; font-weight: 700; }
.rpos-bill-items     { font-size: 11px; color: var(--rpos-text-muted); }


/* ============================================================================
   15. POS PRINT UI  (.pp-*)  — shared between both POS pages
   ============================================================================ */

/* ── Station selector modal ─────────────────────────────────────────────── */
.pp-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.pp-modal.is-open { display: flex; }

.pp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); }
.dark .pp-backdrop { background: rgba(0,0,0,.7); }

.pp-card {
    position: relative;
    z-index: 1;
    background: var(--fi-bg, #fff);
    border: 1px solid var(--fi-color-gray-200, #e5e7eb);
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dark .pp-card {
    background: var(--fi-bg, #111827);
    border-color: var(--fi-color-gray-700, #374151);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.pp-card-head  { text-align: center; margin-bottom: 24px; }
.pp-card-emoji { font-size: 40px; margin-bottom: 8px; }
.pp-card-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--fi-color-gray-950, #111); }
.dark .pp-card-title { color: var(--fi-color-gray-50, #f9fafb); }
.pp-card-sub   { font-size: 13px; color: var(--fi-color-gray-500, #6b7280); margin-top: 6px; }

.pp-station-list { display: flex; flex-direction: column; gap: 8px; }
.pp-station-btn {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    background: transparent;
    border: 2px solid var(--fi-color-gray-200, #e5e7eb);
    color: var(--fi-color-gray-950, #111);
    transition: border-color .15s, background .15s;
}
.dark .pp-station-btn { border-color: var(--fi-color-gray-700, #374151); color: var(--fi-color-gray-50, #f9fafb); }
.pp-station-btn:hover { border-color: var(--fi-color-gray-400, #9ca3af); }
.dark .pp-station-btn:hover { border-color: var(--fi-color-gray-500, #6b7280); }
.pp-station-btn.is-selected,
.pp-station-btn.is-selected:hover { background: rgba(16,185,129,.08); border-color: #10b981; }
.dark .pp-station-btn.is-selected,
.dark .pp-station-btn.is-selected:hover { background: rgba(16,185,129,.15); border-color: #10b981; }
.pp-station-name    { font-weight: 600; font-size: 13px; }
.pp-station-printer { font-size: 12px; color: var(--fi-color-gray-500, #6b7280); margin-top: 2px; }

.pp-skip-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--fi-color-gray-400, #9ca3af);
    transition: color .15s;
}
.pp-skip-btn:hover { color: var(--fi-color-gray-600, #4b5563); }
.dark .pp-skip-btn:hover { color: var(--fi-color-gray-300, #d1d5db); }

.pp-status { margin-top: 16px; text-align: center; font-size: 12px; color: var(--fi-color-gray-400, #9ca3af); }

/* ── Topbar indicator pill (rendered outside this blade; uses #printer-dot) ─ */
.pp-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--fi-bg, #fff);
    border: 1px solid var(--fi-color-gray-200, #e5e7eb);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fi-color-gray-700, #374151);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    cursor: pointer;
    transition: box-shadow .15s;
}
.pp-indicator:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.dark .pp-indicator {
    background: var(--fi-bg, #111827);
    border-color: var(--fi-color-gray-700, #374151);
    color: var(--fi-color-gray-300, #d1d5db);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.dark .pp-indicator:hover { box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; flex-shrink: 0; }

/* ── Print toast ────────────────────────────────────────────────────────── */
.pp-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    animation: ppFadeIn .2s ease;
}
.pp-toast--success { background: #10b981; }
.pp-toast--error   { background: #ef4444; }


/* ============================================================================
   16. RESPONSIVE
   The POS reacts to the width it REALLY has, using container queries:
     - rpos-shell = the whole POS (changes when the panel sidebar opens/closes)
     - rpos-left  = the menu / bills side, next to the order panel
   So the same rules work with the sidebar open or collapsed, on a desktop, a
   tablet or a phone, without guessing from the browser width.

   Steps, widest to narrowest:
     A. Wide            menus in a column on the left, order panel on the right
     B. Menu side tight menus move to a strip along the TOP of the items
     C. Menu side small smaller item cards
     D. Phone width     one pane at a time, with a bar to switch menu <-> order
   ============================================================================ */

@supports (container-type: inline-size) {

    /* A. The order panel is a share of the POS width, between 330px and 460px,
          instead of a fixed 480px that starved the menu on smaller screens. */
    .rpos-body {
        grid-template-columns: minmax(0, 1fr) clamp(330px, 32cqi, 460px);
    }

    /* B. Menu side 760px or less: menus go to the top, as one scrolling row. */
    @container rpos-left (max-width: 760px) {
        .rpos-menu-region {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto minmax(0, 1fr);
            gap: 10px;
        }
        .rpos-menu-rail {
            flex-direction: row;
            align-items: stretch;
            gap: 6px;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0 0 6px;
        }
        .rpos-rail-title { display: none; }
        .rpos-rail-item {
            flex-direction: row;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 10px;
        }
        .rpos-rail-ic svg { width: 18px; height: 18px; }
        .rpos-rail-name {
            display: block;
            font-size: 12px;
            white-space: nowrap;
            overflow: visible;
        }
    }

    /* C. Menu side 520px or less: smaller cards, so three still fit across. */
    @container rpos-left (max-width: 520px) {
        .rpos-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(124px, 100%), 1fr));
            grid-auto-rows: 138px;
            gap: 6px;
        }
        .rpos-item-img     { height: 84px; }
        .rpos-item-name-lg { font-size: 14px; }
        .rpos-item-no-img-body { padding: 8px; }
        .rpos-cat { padding: 6px 12px; }
    }

    /* D. Whole POS 620px or less (phones): the menu and the order no longer fit
          side by side, so show ONE at a time, full height, with a bar at the
          bottom to switch. Before, the order sat below the whole menu and had
          to be scrolled to. */
    @container rpos-shell (max-width: 620px) {
        .rpos-body { grid-template-columns: minmax(0, 1fr); }
        .rpos-panebar { display: flex; }

        .rpos-pane-toggle:not(:checked) ~ .rpos-body .rpos-cart { display: none; }
        .rpos-pane-toggle:checked       ~ .rpos-body .rpos-left { display: none; }

        .rpos-pane-toggle:not(:checked) ~ .rpos-panebar .rpos-panebar-to-menu { display: none; }
        .rpos-pane-toggle:checked       ~ .rpos-panebar .rpos-panebar-to-cart { display: none; }
        .rpos-pane-toggle:checked       ~ .rpos-panebar {
            background: var(--rpos-card);
            color: var(--rpos-text);
            border: 1px solid var(--rpos-border);
        }
    }
}

/* Old browsers without container queries: the previous simple behaviour. */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .rpos-shell { height: auto; overflow: visible; }
        .rpos-body  { grid-template-columns: 1fr; grid-template-rows: auto auto; }
        .rpos-menu-region { grid-template-columns: 96px 1fr; }
        .rpos-cart  { height: auto; max-height: 70vh; }
    }
}


/* ============================================================================
   17. PRINT
   ============================================================================ */

@media print {
    body * { visibility: hidden !important; }
    #thermal-receipt, #thermal-receipt * { visibility: visible !important; }
    #thermal-receipt {
        position: absolute;
        left: 0; top: 0;
        margin: 0;
        padding: 4mm;
        box-shadow: none;
        background: #fff;
        color: #000;
    }
    .thermal-receipt.80mm { width: 72mm; }
    .thermal-receipt.58mm { width: 52mm; }
    @page { margin: 0; size: auto; }
}


/* ============================================================================
   18. KEYFRAMES
   (posFadeIn lives in the blade's @assets block; rpos-pulse was removed with
    the superseded .rpos-fired-badge.)
   ============================================================================ */

@keyframes ppFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}