/* ════════════════════════════════════════════════════════════════════════
   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 ════════════════════ */
.rs-topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: #16213e;
    border-bottom: 1px solid #0f3460;
    flex-shrink: 0;
}

.rs-brand {
    font-size: 18px;
    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: 12px;
    flex-shrink: 0;
}

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

.rs-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    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; }
.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;
    padding: 16px 18px;
    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) ── */
.rs-register-gate {
    background: #78350f;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 12px;
    text-align: center;
    flex-shrink: 0;
}
.rs-register-gate-title { font-size: 18px; font-weight: 700; color: #fde68a; }
.rs-register-gate-sub { font-size: 13px; color: #fcd9a3; margin-top: 4px; }
.rs-register-gate-btn {
    margin-top: 12px;
    padding: 10px 22px;
    background: #16a34a;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    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: 4px;
    padding: 7px 14px;
    min-width: 64px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.1;
}
.rs-tab-ico { opacity: 0.85; flex-shrink: 0; }
.rs-tabs .tab-btn.active .rs-tab-ico { opacity: 1; }
.rs-tab-lbl { white-space: nowrap; }

/* 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 cards: wave badge over label (scoped, shell-only) ── */
.rs-reskin .lagoon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    position: relative;
}
.rs-reskin .rs-lagoon-ico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.16);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.rs-reskin .lagoon-btn.active .rs-lagoon-ico {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.rs-reskin .rs-lagoon-lbl { font-size: 14px; font-weight: 600; }
/* Selected lagoon gets the mockup's green check badge in the corner. */
.rs-reskin .lagoon-btn.active::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── 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: 12px;
    padding: 0 0 12px;
    overflow: hidden;
    gap: 10px;
}
html.rs-light .rs-reskin .lagoon-btn .rs-lagoon-ico {
    width: 100%;
    height: 56px;
    border-radius: 0;
    background: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #1e40af 100%);
    color: rgba(255, 255, 255, 0.92);
}
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); }
html.rs-light .rs-reskin .lagoon-btn.active .rs-lagoon-ico { color: #fff; }
/* Show-all chip has no band/label spans — give it back its padding. */
html.rs-light .rs-reskin #lagoonClearBtn { padding: 14px 18px; border-radius: 12px; }

/* ── 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: 8px;
}
.rs-customer-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.rs-cb-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.rs-cb-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 15px; }
.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; }
.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: 6px 12px; min-width: 84px; background: #1a1a2e; display: inline-block; }
.rs-cb-chip-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #7f93b3; }
.rs-cb-chip-val { font-size: 13px; 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: 9px 16px;
    color: #9fb3d1;
    font-family: inherit;
    font-size: 11.5px;
    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 14px; }
.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; }