/* ════════════════════════════════════════════════════════════════════════
   shell.css — Issues-POSRedesign-001 POS RESKIN vertical slice
   ----------------------------------------------------------------------------
   Loaded AFTER pos.css. pos.css still owns every COMPONENT internal
   (.quick-key / .session-time / .cart-item / .modal / .lagoon-btn / totals /
   .tab-btn / .pos-acc-panel accordion). shell.css ONLY:
     1. re-skins the region containers into the owner-mockup 5-zone layout
        (top bar / left-rail stepper / center / right-rail sale / status strip),
     2. uses NEW structural class names (.rs-*) so it never fights pos.css's
        .pos-container/.pos-main/.pos-left/.pos-right layout rules,
     3. pulls all colors from pos.css's :root theme vars + the existing
        #16213e / #0f3460 / #1a1a2e palette so it reads as one product.
   No pos.js, index.html, or pos.css were modified.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Shell frame -------------------------------------------------------- */
body.rs-reskin {
    background: #1a1a2e;
    color: #fff;
    overflow: hidden;
}

.rs-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

/* ════════════════════ ZONE 1 — TOP BAR ════════════════════ */
/* Debug-pass fix: tightened padding/gap — the top bar is fixed-height chrome
   present on every screen, so trimming it here is pure upside for every
   view, not just the calendar. */
.rs-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px;
    background: #16213e;
    border-bottom: 1px solid #0f3460;
    flex-shrink: 0;
}

.rs-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #fff;
    white-space: nowrap;
}

/* Module tabs — reuse .tab-btn (pos.css) inside a top-bar flex row. */
.rs-tabs {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    min-width: 0;
}

.rs-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rs-topbar-right .btn-icon { padding: 5px; }

.rs-cashier {
    white-space: nowrap;
}

.rs-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ════════════════════ SUB-BAR ════════════════════ */
.rs-subbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 18px;
    background: #101a30;
    border-bottom: 1px solid #0f3460;
    font-size: 12.5px;
    color: #9fb3d1;
    flex-shrink: 0;
}

.rs-subbar .rs-sub-item strong { color: #dbe7f7; font-weight: 600; }
/* Owner 2026-09-30: the ticking clock rewrapped the bar on small screens (flicker). Fixed-width digits,
   one line, and the portal nav scrolls sideways instead of wrapping. */
.rs-subbar { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.rs-subbar .rs-sub-item { flex-shrink: 0; }
.rs-subbar #currentTime { font-variant-numeric: tabular-nums; }
.rs-subbar .rs-portal-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rs-subbar .rs-portal-nav::-webkit-scrollbar { display: none; }
.rs-subbar .rs-sub-sep { color: #44567a; }

.rs-portal-nav {
    margin-left: auto;
    display: flex;
    gap: 12px;
}
.rs-portal-nav a {
    color: #9fb3d1;
    text-decoration: none;
    font-size: 12.5px;
    padding: 2px 4px;
}
.rs-portal-nav a.active { color: var(--primary); font-weight: 600; }
.rs-portal-nav a:hover { color: #fff; }

/* ════════════════════ BODY GRID (zones 2-4) ════════════════════ */
.rs-main {
    flex: 1;
    display: grid;
    /* Owner review item 2 — narrower left stepper rail (was 232px) so the
       center gets more room. Still wide enough for the step labels. */
    grid-template-columns: 190px minmax(0, 1fr) 384px;
    min-height: 0;
    overflow: hidden;
}

/* ───────── ZONE 2 — LEFT RAIL: stepper ───────── */
.rs-rail {
    background: #13203b;
    border-right: 1px solid #0f3460;
    padding: 18px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Module label above the stepper (which guided flow you're in). Updated per
   module by rsSyncRail(); reads "Sessions" on the flagship tab. */
.rs-rail-module {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: #7f93b3;
    padding: 0 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #0f3460;
}

.rs-stepper {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}

/* The 7 non-Sessions modules reuse the SAME .rs-step visual language; this
   marker class only exists so the two steppers can be toggled independently. */
.rs-module-stepper { /* shares .rs-stepper layout */ }

.rs-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #9fb3d1;
    transition: background 0.15s, color 0.15s;
}
.rs-step:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.rs-step.active { background: var(--primary); color: #fff; }

.rs-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.rs-step.done .rs-step-num {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.rs-step-label { font-size: 14px; font-weight: 500; }

.rs-clear-booking {
    margin-top: auto;
    padding: 12px;
    background: transparent;
    border: 1px solid #45506b;
    border-radius: 8px;
    color: #c0cce0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.rs-clear-booking:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ───────── ZONE 3 — CENTER ─────────
   Flex column that mirrors pos.css's .pos-left so #quickKeysContainer's
   flex:1 + the accordion behave exactly as on index.html. */
.rs-center.pos-left-host {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Debug-pass fix: tightened from 16px 18px — every px trimmed off this
       outer padding is a px handed straight to the calendar body below,
       which is flex:1 and absorbs whatever's left over. */
    padding: 10px 16px;
    gap: 4px;
    background: #1a1a2e;
}

/* ───────── ZONE 4 — RIGHT RAIL: Current Sale ─────────
   Mirrors pos.css's .pos-right (the customer / cart / totals / action
   components inside keep their own pos.css styling). */
.rs-sale.pos-right-host {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #16213e;
    border-left: 1px solid #0f3460;
}

/* Owner review item 4 — the 6 redundant payment tiles were removed from the
   right rail; the single full-width PAY button (#payPrimaryBtn → its own
   chooser modal) is the only payment entry now. (Their .rs-pay-tile* rules
   were deleted with them.) */

/* ── Owner review item 3 — keep the cart line-item list visible ──
   pos.css gives `.cart-section{flex:1;flex-basis:0;overflow:hidden}` and
   `.cart-items{flex:1}`. That works in index.html (the right pane fills the
   viewport) but in this reskin the right rail is a fixed-height GRID cell, and
   with the tall action footer below it the flex:0-basis cart collapsed to ~0px
   — its overflow:hidden then clipped every line item out of view. The reskin
   rail already scrolls as a whole (.rs-sale{overflow-y:auto}), so pin the cart
   to its natural height (sane min/max + its own scroll) instead of letting it
   flex-collapse. DOM order (customer → #cartItems → totals → PAY) is unchanged. */
.rs-sale.pos-right-host .cart-section {
    flex: 0 0 auto;
    overflow: visible;
}
.rs-sale.pos-right-host .cart-items {
    flex: 0 0 auto;
    min-height: 110px;
    max-height: 40vh;
    overflow-y: auto;
}

/* ── Owner review item 5 — open-register gate banner (center column) ── */
/* Debug-pass fix: was 18px 20px padding / 12px margin — one of the largest
   single contributors to "stuff above the calendar" on a Sessions-tab
   first load (register not yet opened for the shift). Same information,
   noticeably less vertical footprint. */
.rs-register-gate {
    background: #78350f;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 6px;
    text-align: center;
    flex-shrink: 0;
}
.rs-register-gate-title { font-size: 15px; font-weight: 700; color: #fde68a; }
.rs-register-gate-sub { font-size: 12px; color: #fcd9a3; margin-top: 2px; }
.rs-register-gate-btn {
    margin-top: 8px;
    padding: 7px 18px;
    background: #16a34a;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.rs-register-gate-btn:hover { background: #15803d; }

/* ── Owner review items 1 + 5 — disabled PAY (no customer OR no open register).
   The button also carries the native `disabled` attribute (set by
   rsUpdateGates) so it is truly non-clickable; this only greys it over the
   inline cyan background. ── */
#payPrimaryBtn.rs-disabled,
.rs-sale .btn-pay.rs-disabled {
    background: #334155 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.75;
}
.rs-pay-gate-hint {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #fca5a5;
}

/* PAY button attention pulse when the cashier jumps to the checkout step. */
@keyframes rsPulse {
    0%   { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(8, 145, 178, 0); }
}
.rs-pulse { animation: rsPulse 0.9s ease-out 1; }

/* ════════════════════ ZONE 5 — BOTTOM STATUS STRIP ════════════════════ */
.rs-statusbar {
    display: flex;
    background: #101a30;
    border-top: 1px solid #0f3460;
    flex-shrink: 0;
}
.rs-stat {
    flex: 1;
    padding: 7px 14px;
    text-align: center;
    border-right: 1px solid #0f3460;
}
.rs-stat:last-child { border-right: none; }
.rs-stat-val { font-size: 16px; font-weight: 700; color: #dbe7f7; line-height: 1.2; }
.rs-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7f93b3;
    margin-top: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   ICON + BUTTON DESIGN — owner POS-redesign mockup (Issues-POSRedesign-001)
   Adds the mockup's line-icon language to the chrome. Anything that targets a
   pos.js-rendered element (.pos-type-icon on cart items + quick keys) is scoped
   to .rs-reskin so the OLD POS (index.html) is unaffected by the badge styling
   — the bare inline SVG still renders there (flagged in the WO report).
   ════════════════════════════════════════════════════════════════════════ */

/* ── ZONE 1 — module tabs: icon ABOVE label ── */
.rs-tabs .tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    min-width: 54px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
}
.rs-tab-ico { opacity: 0.85; flex-shrink: 0; width: 18px; height: 18px; }
.rs-tabs .tab-btn.active .rs-tab-ico { opacity: 1; }
.rs-tab-lbl { white-space: nowrap; }
/* Issues-POSFoodTab-001: nine module tabs -- tighten them on tablet-width screens so all of them
   stay visible (at 1024px the last tabs used to sit behind a horizontal scroll). */
@media (max-width: 1280px) {
    .rs-tabs { gap: 2px; }
    .rs-tabs .tab-btn { padding: 4px 5px; min-width: 44px; }
}

/* Open Register green pill (mockup) + status dot. */
.rs-open-register { display: inline-flex; align-items: center; gap: 7px; }
.rs-open-register:hover { background: #15803d !important; }
.rs-reg-ico { flex-shrink: 0; }

/* Register-open badge: compact 2-line — small uppercase label + bank amount */
.rs-reskin #registerStatusBtn { align-items: center; line-height: 1.15; }
.rs-reskin #registerStatusLabel { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; }
.rs-reskin .rs-reg-l1 { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.85; }
.rs-reskin .rs-reg-l2 { font-size: 12px; font-weight: 700; line-height: 1.1; }
.rs-bell { position: relative; }

/* ── ZONE 2 — stepper checkmark + Clear Booking reset icon ── */
/* The completed-step circle already swaps its number→✓ in rsRenderStepper();
   tighten the glyph so it reads as a clean check. */
.rs-step.done .rs-step-num { font-size: 15px; line-height: 1; }
/* Reset icon prepended to "Clear Booking" via a pseudo-element — pos.js's glue
   sets the button's textContent (Clear Booking / Clear Sale), which would wipe a
   real child node, so the icon lives in ::before (a data-URI stroke icon). */
.rs-clear-booking { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rs-clear-booking::before {
    content: '';
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c0cce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ── ZONE 3 — lagoon buttons: flat compact row, matching the mockup ──
   Debug-pass fix: the icon-over-label "card" treatment (46px icon circle +
   stacked label + checkmark badge) rendered far bigger than the mockup's
   plain, single-row text buttons. Hide the icon, drop the stacking, and
   size the label/padding down to match. */
.rs-reskin .lagoon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-height: 0;
    position: relative;
}
.rs-reskin .rs-lagoon-ico { display: none; }
.rs-reskin .rs-lagoon-lbl { font-size: 13px; font-weight: 600; }

/* ── Center tile (quick-key) type icon — scoped to reskin ── */
.rs-reskin .quick-key { position: relative; }
.rs-reskin .quick-key-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.14);
    color: var(--primary);
}
.rs-reskin .quick-key.rental .quick-key-icon { background: rgba(76, 175, 80, 0.16); color: var(--success); }
.rs-reskin .quick-key.pass   .quick-key-icon { background: rgba(255, 152, 0, 0.16); color: var(--warning); }
.rs-reskin .quick-key.cabana .quick-key-icon { background: rgba(233, 30, 99, 0.16); color: #e91e63; }
.rs-reskin .quick-key.retail .quick-key-icon { background: rgba(156, 39, 176, 0.16); color: #ba68c8; }
.rs-reskin .quick-key-icon svg { width: 20px; height: 20px; }

/* ── ZONE 4 — Current Sale header icon buttons (kebab + trash) ── */
.rs-cart-head-actions { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.rs-cart-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 6px;
    color: #b8c6de;
    line-height: 0;
}
.rs-cart-icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Cart line-item circular type badge (scoped — pos.js renderCart adds the span;
   the bare icon also appears in the OLD POS, flagged in the WO). */
.rs-reskin .cart-item { gap: 10px; }
.rs-reskin .cart-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.16);
    color: var(--primary);
}
.rs-reskin .cart-item-icon svg { width: 17px; height: 17px; }

/* Live grand total on the PAY button (owner: amount on the button, per mockup) */
.rs-reskin #payPrimaryLabel { font-weight: 700; }
.rs-reskin .rs-pay-amount { font-weight: 800; margin-left: 8px; letter-spacing: 0.3px; }
.rs-reskin .rs-pay-amount:empty { display: none; }

/* ── Payment method tiles — 3×2 grid above PAY (owner decision A) ── */
.rs-pay-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.rs-pay-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 8px;
    color: #cdd9ec;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rs-pay-tile svg { width: 24px; height: 24px; color: #9fb3d1; transition: color 0.15s; }
.rs-pay-tile span { white-space: nowrap; }
.rs-pay-tile:hover { background: #223052; color: #fff; }
.rs-pay-tile:hover svg { color: #fff; }
.rs-pay-tile.selected {
    border-color: var(--primary);
    background: rgba(33, 150, 243, 0.16);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35);
}
.rs-pay-tile.selected svg { color: var(--primary); }

/* PAY button — full width, green, lock + label on one row (mockup). */
.rs-reskin .action-buttons .primary-actions { grid-template-columns: 1fr; }
.rs-reskin .rs-pay-btn {
    flex-direction: row;
    gap: 10px;
    padding: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rs-reskin .rs-pay-btn:hover { background: #15803d !important; }
.rs-reskin .rs-pay-btn .pay-icon { font-size: 0; display: inline-flex; }
.rs-reskin .rs-pay-btn #payPrimaryLabel { font-weight: 700; }

/* ── ZONE 5 — KPI strip icons ── */
.rs-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
}
.rs-stat-ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.14);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rs-stat-ico svg { width: 22px; height: 22px; }
.rs-stat-text { text-align: left; }

/* ---- Narrow-viewport guard (iPad portrait / small) ---------------------- */
@media (max-width: 1100px) {
    .rs-main { grid-template-columns: 168px minmax(0, 1fr) 340px; }
}
@media (max-width: 920px) {
    .rs-main {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        overflow-y: auto;
    }
    .rs-rail { border-right: none; border-bottom: 1px solid #0f3460; }
    .rs-rail .rs-stepper { flex-direction: row; flex-wrap: wrap; }
    .rs-sale.pos-right-host { border-left: none; border-top: 1px solid #0f3460; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Issues-POSRedesign-001 (owner Figma retarget 2026-08-03,
   'DSRT-Surf-Interfaces' FkZmJL25X0WNmbVjeIgmBB node 55-2).
   Toggled by html.rs-light (sun/moon button in the top bar; persisted
   per-terminal in localStorage.posShellTheme; boot script in index.html
   <head> applies it before first paint). Per the mockup the LEFT STEPPER
   RAIL and BOTTOM KPI STRIP stay dark navy in light mode — those regions
   deliberately have NO overrides here. Everything else swaps to the light
   palette: page #f1f5f9, cards #fff, borders #e2e8f0, ink #0f172a, muted
   #64748b. Covers BOTH shell chrome and the pos.css component internals
   (this file loads last, and html.rs-light out-specifies pos.css). The
   embedded Session Calendar + Intake panels keep their dark CSS this pass —
   superseded by the new Session Calendar module design (see WO).
   ════════════════════════════════════════════════════════════════════════ */

/* Toggle button — icon swap. Sun visible in dark ("go light"), moon in light. */
.rs-theme-toggle .rs-ico-moon { display: none; }
html.rs-light .rs-theme-toggle .rs-ico-sun { display: none; }
html.rs-light .rs-theme-toggle .rs-ico-moon { display: block; }

/* Mockup accent — deeper blue than the dark theme's #2196F3. Also recolors
   the (still-dark) rail's active step + KPI icons, which matches the mockup. */
html.rs-light {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
}

/* ── Shell frame + chrome ── */
html.rs-light body.rs-reskin { background: #f1f5f9; color: #0f172a; }
html.rs-light .rs-topbar { background: #fff; border-bottom-color: #e2e8f0; }
html.rs-light .rs-brand { color: #0f172a; }
html.rs-light .rs-topbar .btn-icon { color: #64748b; }
html.rs-light .rs-topbar .btn-icon:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }
html.rs-light .rs-cashier { color: #64748b; }
html.rs-light .rs-tabs .tab-btn { color: #64748b; }
html.rs-light .rs-tabs .tab-btn:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
html.rs-light .rs-tabs .tab-btn.active { background: var(--primary); color: #fff; }
html.rs-light .rs-subbar { background: #f8fafc; border-bottom-color: #e2e8f0; color: #64748b; }
html.rs-light .rs-subbar .rs-sub-item strong { color: #334155; }
html.rs-light .rs-subbar .rs-sub-sep { color: #cbd5e1; }
html.rs-light .rs-portal-nav a { color: #64748b; }
html.rs-light .rs-portal-nav a.active { color: var(--primary); }
html.rs-light .rs-portal-nav a:hover { color: #0f172a; }
html.rs-light .rs-center.pos-left-host { background: #f1f5f9; }
html.rs-light .rs-sale.pos-right-host { background: #fff; border-left-color: #e2e8f0; }

/* ── Register gate banner (amber, light variant) ── */
html.rs-light .rs-register-gate { background: #fef3c7; border-color: #f59e0b; }
html.rs-light .rs-register-gate-title { color: #92400e; }
html.rs-light .rs-register-gate-sub { color: #b45309; }

/* ── Payment tiles + PAY gating ── */
html.rs-light .rs-pay-tile { background: #fff; border-color: #e2e8f0; color: #334155; }
html.rs-light .rs-pay-tile svg { color: #64748b; }
html.rs-light .rs-pay-tile:hover { background: #f1f5f9; color: #0f172a; }
html.rs-light .rs-pay-tile:hover svg { color: #0f172a; }
html.rs-light .rs-pay-tile.selected { background: rgba(37, 99, 235, 0.08); color: #1d4ed8; }
html.rs-light .rs-pay-tile.selected svg { color: var(--primary); }
html.rs-light #payPrimaryBtn.rs-disabled,
html.rs-light .rs-sale .btn-pay.rs-disabled { background: #cbd5e1 !important; color: #64748b !important; }
html.rs-light .rs-pay-gate-hint { color: #dc2626; }
html.rs-light .rs-cart-icon-btn { color: #64748b; }
html.rs-light .rs-cart-icon-btn:hover { background: rgba(15, 23, 42, 0.07); color: #0f172a; }

/* ── pos.css component internals — CENTER (tiles / accordion / picker) ── */
html.rs-light .quick-key { background: #fff; border-color: #e2e8f0; }
html.rs-light .quick-key:hover { background: #f8fafc; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
html.rs-light .quick-key-name { color: #0f172a; }
html.rs-light .quick-key-info { color: #64748b; }
html.rs-light .quick-key.disabled { background: #f1f5f9; border-color: #fecaca; }
html.rs-light .quick-key.disabled:hover { background: #f1f5f9; }
html.rs-light .pos-acc-panel { background-color: #fff; border-top-color: #e2e8f0; }
html.rs-light .pos-acc-panel .pos-acc-header::after { color: #94a3b8; }
html.rs-light .lagoon-selector h3,
html.rs-light .session-selector h3,
html.rs-light .step-heading { color: #475569; }
html.rs-light .lagoon-btn { background: #fff; color: #0f172a; border-color: #e2e8f0; }
html.rs-light .lagoon-btn:hover { background: #eff6ff; }
html.rs-light .lagoon-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Inline style="background:#444" on the Show-all chip needs the hammer. */
html.rs-light #lagoonClearBtn { background: #e2e8f0 !important; color: #334155; }
html.rs-light .lesson-toggle { background: #fff; border-top-color: #e2e8f0; }
html.rs-light .lesson-toggle label { color: #0f172a; }
html.rs-light .lesson-toggle small { color: #64748b; }
html.rs-light .date-picker input[type="date"] { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.rs-light .date-nav { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.rs-light .date-nav:hover { background: #eff6ff; border-color: var(--primary); }
html.rs-light .session-time { background: #fff; border-color: #e2e8f0; }
html.rs-light .session-time:hover { background: #eff6ff; border-color: var(--primary); }
html.rs-light .session-time.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
html.rs-light .session-time .availability { color: #64748b; }
html.rs-light .session-time.selected .availability { color: rgba(255, 255, 255, 0.85); }
html.rs-light .session-time.full { background: #f8fafc; border-color: #fecaca; }

/* ── pos.css component internals — RIGHT RAIL (customer / cart / totals) ── */
html.rs-light .customer-search input { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
html.rs-light .customer-search input::placeholder { color: #94a3b8; }
html.rs-light .customer-info { background: #f1f5f9; }
html.rs-light .customer-details span { color: #64748b; }
html.rs-light .customer-results { background: #fff; border: 1px solid #e2e8f0; }
html.rs-light .customer-result { border-bottom-color: #e2e8f0; }
html.rs-light .customer-result:hover { background: #eff6ff; }
/* Inline-styled dark textarea + note list in the customer card. */
html.rs-light #customerNoteInput { background: #fff !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
html.rs-light #customerNotesList { color: #475569 !important; }
html.rs-light .cart-header { background: #f1f5f9; color: #0f172a; }
html.rs-light .empty-cart { color: #94a3b8; }
html.rs-light .cart-item { background: #f8fafc; border: 1px solid #eef2f7; }
html.rs-light .cart-item-details { color: #64748b; }
html.rs-light .qty-btn { background: #e2e8f0; color: #0f172a; }
html.rs-light .qty-btn:hover { background: var(--primary); color: #fff; }
html.rs-light .cart-item-remove { color: #94a3b8; }
html.rs-light .totals-section { background: #f8fafc; border-top: 1px solid #e2e8f0; }
html.rs-light .total-row { color: #475569; }
html.rs-light .total-grand { color: #0f172a; border-top-color: #e2e8f0; }
html.rs-light .action-buttons { background: #fff; border-top: 1px solid #e2e8f0; }
html.rs-light .btn-secondary { background: #fff; border-color: #e2e8f0; color: #334155; }
html.rs-light .btn-secondary:hover { background: #f1f5f9; }

/* ── pos.css component internals — MODALS + FORMS ── */
html.rs-light .modal { background: rgba(15, 23, 42, 0.45); }
html.rs-light .modal-content { background: #fff; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); }
html.rs-light .modal-header { border-bottom-color: #e2e8f0; }
html.rs-light .modal-footer { border-top-color: #e2e8f0; }
html.rs-light .modal-close { color: #94a3b8; }
html.rs-light .modal-close:hover { color: #0f172a; }
html.rs-light .form-group label { color: #475569; }
html.rs-light .form-group input,
html.rs-light .form-group select { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
html.rs-light .payment-amount { background: #f1f5f9; }
html.rs-light .payment-amount span:first-child { color: #64748b; }
html.rs-light .quick-cash-buttons button { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.rs-light .quick-cash-buttons button:hover { background: #eff6ff; }
html.rs-light .toggle-btn { background: #fff; border-color: #e2e8f0; color: #334155; }
html.rs-light .toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
html.rs-light .tip-btn { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.rs-light .parked-sale-item { background: #f8fafc; }
html.rs-light .parked-sale-item:hover { background: #eff6ff; }
html.rs-light .parked-sale-info p { color: #64748b; }
html.rs-light .empty-message { color: #94a3b8; }
html.rs-light .terminal-waiting { color: #64748b; }

/* ── Scrollbars ── */
html.rs-light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.rs-light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.rs-light ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE — CONTENT DESIGN pass (owner: apply node 55-2's CONTENT design,
   keep our chrome/nav). CSS-only layer on the light theme: the center picker
   panels become white rounded CARDS, lagoon buttons become the mockup's
   wave cards (gradient "water" band standing in for the photos until real
   assets exist), time slots read as chips, and the right rail gets the
   Cart & Checkout treatment incl. the mockup's BLUE Pay button. No DOM, no
   pos.js — headings keep their text numbers ("1. Lagoon side") because
   pos.js rewrites them via textContent on module switches (a chip ::before
   would double-number them). Data-dependent mockup panels (Guest Summary /
   Live Park Status / real photos / per-card counts) are follow-ups on the WO.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Center workspace → spaced card sections ── */
html.rs-light .rs-center.pos-left-host { padding: 16px 20px; gap: 12px; }
html.rs-light .rs-center .pos-acc-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html.rs-light .rs-center .lesson-toggle {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
}
html.rs-light .rs-center .pos-acc-header h3 { color: #0f172a; font-size: 15px; font-weight: 700; }
html.rs-light .rs-center .register-gate,
html.rs-light .rs-register-gate { border-radius: 12px; }

/* ── Lagoon buttons → mockup wave cards (photo band on top, label below) ── */
html.rs-light .rs-reskin .lagoon-buttons { gap: 12px; }
html.rs-light .rs-reskin .lagoon-btn {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
}
html.rs-light .rs-reskin .rs-lagoon-lbl { color: #0f172a; }
html.rs-light .rs-reskin .lagoon-btn:hover { background: #fff; border-color: #93c5fd; }
html.rs-light .rs-reskin .lagoon-btn.active {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
html.rs-light .rs-reskin .lagoon-btn.active .rs-lagoon-lbl { color: var(--primary); }

/* ── Time slots → compact chips (touch floor kept at 56px) ── */
html.rs-light .session-times { gap: 8px; }
html.rs-light .session-time { min-height: 56px; padding: 10px 10px; border-radius: 10px; }
html.rs-light .session-time .time { font-size: 15px; }
html.rs-light .date-picker input[type="date"],
html.rs-light .date-nav { border-radius: 10px; }

/* ── Session-type + product tiles ── */
html.rs-light .quick-key { border-radius: 12px; }

/* ── Right rail → Cart & Checkout card treatment ── */
html.rs-light .customer-search input { border-radius: 10px; }
html.rs-light .customer-info { border-radius: 10px; }
html.rs-light .cart-header { background: #fff; color: #0f172a; padding: 14px 16px 6px; }
html.rs-light .cart-header span { font-weight: 700; font-size: 16px; }
html.rs-light .cart-item { border-radius: 10px; }
html.rs-light .totals-section { background: #fff; }
html.rs-light .total-grand { font-size: 22px; }
html.rs-light .btn-secondary { border-radius: 10px; }
html.rs-light .rs-pay-tile { border-radius: 10px; }
/* Mockup's BLUE Pay (overrides the inline green; the light disabled rule
   above out-specifies this, so gating still greys it). */
html.rs-light #payPrimaryBtn { background: var(--primary) !important; }
html.rs-light #payPrimaryBtn:hover { background: var(--primary-dark) !important; }

/* ── Session-type / product tiles → mockup type cards (left-aligned title +
      muted info, blue price, colored left strips dropped — the icon circle
      already color-codes the type) ── */
html.rs-light .rs-reskin .quick-key { text-align: left; padding: 14px 16px; }
html.rs-light .rs-reskin .quick-key-icon { margin: 0 0 10px; }
html.rs-light .quick-key-price { color: #1d4ed8; }
html.rs-light .rs-reskin .quick-key.session,
html.rs-light .rs-reskin .quick-key.rental,
html.rs-light .rs-reskin .quick-key.pass,
html.rs-light .rs-reskin .quick-key.cabana,
html.rs-light .rs-reskin .quick-key.retail { border-left: 2px solid #e2e8f0; }
html.rs-light .rs-reskin .quick-key:hover { border-color: #93c5fd; }
html.rs-light .rs-reskin .quick-key:active {
    transform: translateY(0);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* ── Extras step → selectable tile (mockup extras card; checked = blue) ── */
html.rs-light .rs-center .lesson-toggle label {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.15s, background 0.15s;
}
html.rs-light .rs-center .lesson-toggle label:hover { border-color: #93c5fd; }
html.rs-light .rs-center .lesson-toggle label:has(input:checked) {
    border-color: var(--primary);
    background: #eff6ff;
}
html.rs-light .rs-center .lesson-toggle input[type="checkbox"] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}
html.rs-light .rs-center .lesson-toggle small { margin: 8px 4px 0; }

/* ── CUSTOMER HUB (owner 2026-08-04): bar + collapsible accordions hosting
      ALL customer UI (search / details-edit-notes / guest summary). Renders
      in BOTH themes — dark palette is the base, light overrides below. ── */
.rs-customer-hub {
    flex-shrink: 0;
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 6px;
}
/* Debug-pass fix: tightened bar padding (12px 16px -> 8px 16px) and avatar
   (42px -> 34px) — this whole hub sits ABOVE the calendar in every view
   that uses it, so shrinking it here is the direct trade for a taller
   calendar body without touching the calendar's own CSS at all. */
.rs-customer-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.rs-cb-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
/* POS-CUSTOMER-PROFILE-001 (found in deep-debug pass): .rs-cb-main mirrors
   .customer-details' name/email (via rsSyncCustomerUi in index.html) into
   this bar, so it's exposed to the exact same overflow class — a flex item
   with no min-width:0 resists shrinking below its unbroken text's width. */
.rs-cb-main { min-width: 0; }
.rs-cb-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 14px; overflow-wrap: break-word; word-break: break-word; }
.rs-cb-badge { background: #dcfce7; color: #166534; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.rs-cb-contact { font-size: 12.5px; color: #9fb3d1; margin-top: 2px; overflow-wrap: break-word; word-break: break-word; }
.rs-cb-chips { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
body:not(.rs-has-customer) .rs-cb-chips { display: none; }
.rs-cb-chip { border: 1px solid #0f3460; border-radius: 10px; padding: 4px 10px; min-width: 78px; background: #1a1a2e; display: inline-block; }
.rs-cb-chip-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #7f93b3; }
.rs-cb-chip-val { font-size: 12px; font-weight: 700; color: #dbe7f7; }

/* Accordion chrome */
.rs-acc-sec { border-top: 1px solid #0f3460; }
.rs-acc-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 16px;
    color: #9fb3d1;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rs-acc-head:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.rs-acc-chev { transition: transform 0.18s; font-size: 13px; }
.rs-acc-sec.open .rs-acc-chev { transform: rotate(180deg); }
.rs-acc-body { display: none; padding: 2px 16px 10px; }
.rs-acc-sec.open .rs-acc-body { display: block; }
.rs-cust-only { display: none; }
body.rs-has-customer .rs-cust-only { display: block; }

/* Moved pos.css components inside the hub */
.rs-customer-hub .customer-search input[type="search"] { max-width: 480px; }
.rs-customer-hub .customer-info { margin-top: 0; }

/* Guest summary rows (accordion header is the title) */
.rs-guest-summary { max-width: 460px; }
.rs-gs-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #9fb3d1; padding: 4px 0; }
.rs-gs-row strong { color: #dbe7f7; font-weight: 600; }
.rs-gs-link { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--primary); text-decoration: none; font-weight: 600; }
.rs-gs-link:hover { text-decoration: underline; }
/* Waiver state coloring on the fetched chips/rows (both themes-safe greens/reds). */
.rs-cb-chip-val.rs-ok, .rs-gs-row strong.rs-ok { color: #16a34a; }
.rs-cb-chip-val.rs-bad, .rs-gs-row strong.rs-bad { color: #dc2626; }

/* Profile modal (hub View Profile — in-POS, both themes) */
#rsProfileModal .modal-content { max-width: 560px; }
.rs-pm-sec { margin-bottom: 16px; }
.rs-pm-sec:last-child { margin-bottom: 0; }
.rs-pm-sec-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7f93b3;
    margin-bottom: 6px;
}
.rs-pm-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; color: #9fb3d1; }
.rs-pm-row strong { color: #dbe7f7; font-weight: 600; text-align: right; }
.rs-pm-row strong.rs-ok { color: #16a34a; }
.rs-pm-row strong.rs-bad { color: #dc2626; }
html.rs-light .rs-pm-sec-title { color: #94a3b8; }
html.rs-light .rs-pm-row { color: #64748b; }
html.rs-light .rs-pm-row strong { color: #0f172a; }

/* Hub — light theme overrides */
html.rs-light .rs-customer-hub { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
html.rs-light .rs-cb-name { color: #0f172a; }
html.rs-light .rs-cb-contact { color: #64748b; }
html.rs-light .rs-cb-chip { background: #f8fafc; border-color: #e2e8f0; }
html.rs-light .rs-cb-chip-label { color: #94a3b8; }
html.rs-light .rs-cb-chip-val { color: #0f172a; }
html.rs-light .rs-acc-sec { border-top-color: #e2e8f0; }
html.rs-light .rs-acc-head { color: #64748b; }
html.rs-light .rs-acc-head:hover { color: #0f172a; background: rgba(15, 23, 42, 0.04); }
html.rs-light .rs-gs-row { color: #64748b; }
html.rs-light .rs-gs-row strong { color: #0f172a; }

/* Owner 2026-09-22: customer search + New in the top bar, between the module tabs and the
   register chip. The results list drops down under the field instead of pushing content. */
.rs-topbar-customer { position: relative; flex: 0 1 300px; min-width: 200px; }
.rs-topbar-customer .customer-search { gap: 6px; align-items: center; }
.rs-topbar-customer .customer-search input[type="search"] { padding: 7px 10px; font-size: 13px; min-width: 0; }
.rs-topbar-customer .customer-search .btn-small { white-space: nowrap; padding: 7px 10px; }
.rs-topbar-customer .customer-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; max-height: 320px; z-index: 300;
    box-shadow: 0 10px 24px rgba(0,0,0,.35); }
@media (max-width: 1100px) { .rs-topbar-customer { flex-basis: 240px; } }

/* Owner 2026-09-22: one collapsible customer panel — the customer bar IS the accordion head. */
.rs-customer-bar.rs-acc-head { justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: inherit; color: inherit; padding: 8px 16px; }
.rs-customer-bar.rs-acc-head:hover { color: inherit; }
.rs-customer-bar .rs-cb-chips { margin-left: auto; }
.rs-cb-actions { display: flex; align-items: center; gap: 2px; margin-left: 6px; white-space: nowrap; }
.rs-cb-actions .btn-text { font-size: 12.5px; padding: 4px 8px; }
.rs-customer-bar .rs-acc-chev { margin-left: 6px; color: #9fb3d1; }
#rsCustomerHub .customer-info { flex-direction: column; align-items: stretch; margin-top: 0; padding: 6px 0 4px; background: transparent; }
#rsCustomerHub .customer-info > .customer-profile, #rsCustomerHub .customer-info > .customer-notes { margin-top: 8px; }
#rsCustomerHub .rs-gs-row { max-width: 460px; }
html.rs-light #rsCustomerHub .customer-notes textarea { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.rs-customer-bar .rs-cb-main { flex: 1 1 180px; min-width: 140px; }
.rs-customer-bar .rs-cb-contact { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.rs-customer-bar .rs-cb-chips { flex-wrap: nowrap; gap: 6px; }
.rs-customer-bar .rs-cb-chip { min-width: 62px; padding: 3px 8px; }
@media (max-width: 1200px) { .rs-customer-bar .rs-cb-chips { flex-wrap: wrap; } }

/* Owner 2026-09-22: surfer info + emergency details moved into the (editable) profile modal —
   the in-panel read-only block is no longer shown; the body is just the staff log. */
#rsCustomerHub #customerProfile { display: none !important; }
#rsCustomerHub .rs-acc-body { padding-top: 0; }
#rsCustomerHub .customer-info { padding: 0; }
#rsCustomerHub .customer-info > .customer-notes { margin-top: 4px; }
.rs-cb-profile { font-size: 12.5px; font-weight: 600; padding: 4px 8px; margin-right: 2px; }
.rs-pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 14px; }
.rs-pm-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #9fb3d1; margin-top: 6px; }
.rs-pm-input { padding: 6px 8px; font-size: 13px; border: 1px solid #0f3460; border-radius: 6px; background: #1a1a2e; color: #eee; font-family: inherit; width: 100%; box-sizing: border-box; }
.rs-pm-pair { display: flex; gap: 6px; }
.rs-pm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.rs-pm-msg { font-size: 12.5px; }
html.rs-light .rs-pm-input { background: #fff; color: #0f172a; border-color: #cbd5e1; }
html.rs-light .rs-pm-field { color: #475569; }
.rs-customer-bar .rs-cb-main { flex: 1 1 260px; }
.rs-customer-bar .rs-cb-name { flex-wrap: nowrap; white-space: nowrap; }
.rs-customer-bar .rs-cb-badge, .rs-cb-profile { white-space: nowrap; }
.rs-customer-bar .rs-cb-chip { min-width: 0; padding: 3px 8px; }
.rs-customer-bar .rs-cb-chip-label, .rs-customer-bar .rs-cb-chip-val { white-space: nowrap; }
.rs-customer-bar .rs-cb-main { flex: 0 1 auto; min-width: 120px; margin-right: auto; }
.rs-customer-bar .rs-cb-chips { margin-left: 0; }
.rs-customer-bar .rs-cb-name { overflow: visible; }
.rs-customer-bar .rs-cb-main { flex: 0 0 auto; }
.rs-customer-bar .rs-cb-chips { flex: 1 1 auto; min-width: 0; overflow: hidden; justify-content: flex-start; }
@media (max-width: 1200px) {
    .rs-customer-bar.rs-acc-head { flex-wrap: wrap; }
    .rs-customer-bar .rs-cb-chips { order: 5; flex-basis: 100%; overflow: visible; flex-wrap: wrap; }
}

/* Owner 2026-09-23: Purchase history sub-modal (above the profile modal). */
#rsOrdersModal { z-index: 1050; }
#rsOrdersModal .modal-content.rs-om { max-width: 720px; width: 96%; }
.rs-om-order { border: 1px solid #0f3460; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.rs-om-head { display: grid; grid-template-columns: 90px 1fr 110px 1fr 70px 90px 16px; gap: 8px; align-items: center; width: 100%; padding: 9px 12px; background: transparent; border: 0; color: #dbe7f7; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.rs-om-head:hover { background: rgba(255,255,255,.05); }
.rs-om-num { font-weight: 700; letter-spacing: .3px; }
.rs-om-when, .rs-om-ch, .rs-om-n { color: #9fb3d1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-om-st { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.rs-om-total { text-align: right; font-weight: 700; }
.rs-om-order .rs-acc-chev { transition: transform .18s; }
.rs-om-order.open .rs-acc-chev { transform: rotate(180deg); }
.rs-om-lines { display: none; padding: 4px 12px 10px; border-top: 1px solid #0f3460; }
.rs-om-order.open .rs-om-lines { display: block; }
.rs-om-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: 13px; }
.rs-om-line:last-of-type { border-bottom: 0; }
.rs-om-line-name { color: #dbe7f7; font-weight: 600; }
.rs-om-line-meta { color: #9fb3d1; font-size: 12px; margin-top: 2px; }
.rs-om-line-amt { text-align: right; color: #9fb3d1; font-size: 12.5px; white-space: nowrap; }
.rs-om-line-amt strong { color: #dbe7f7; }
.rs-om-sum { display: flex; justify-content: flex-end; gap: 16px; padding-top: 8px; font-size: 12.5px; color: #9fb3d1; }
.rs-om-sum strong { color: #dbe7f7; }
.rs-om-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 16px 12px; }
.rs-om-count { margin-right: auto; font-size: 12.5px; color: #9fb3d1; }
.rs-om-pager .btn-text[disabled] { opacity: .4; cursor: default; }
html.rs-light .rs-om-order { border-color: #e2e8f0; }
html.rs-light .rs-om-head { color: #0f172a; }
html.rs-light .rs-om-head:hover { background: #f8fafc; }
html.rs-light .rs-om-lines { border-top-color: #e2e8f0; }
html.rs-light .rs-om-line { border-bottom-color: #e2e8f0; }
html.rs-light .rs-om-line-name, html.rs-light .rs-om-line-amt strong, html.rs-light .rs-om-sum strong { color: #0f172a; }
@media (max-width: 760px) { .rs-om-head { grid-template-columns: 80px 1fr 80px 16px; } .rs-om-ch, .rs-om-n, .rs-om-st { display: none; } }

/* Issues-POSFoodTab-001: narrower customer search on tablet widths so all nine module tabs fit
   (kept last so it wins over the earlier 1100px flex-basis rule). */
@media (max-width: 1280px) { .rs-topbar-customer { flex-basis: 200px; min-width: 150px; } }
@media (max-width: 1100px) { .rs-cashier { display: none; } .rs-brand { font-size: 13px; } }