/* ════════════════════════════════════════════════════════════════════
   POS Retail — embed deltas for the dashboard (hand-written)
   Loaded AFTER pos-retail-desk.css / pos-retail-mobile.css so it wins.
   Houses the few adjustments the standalone files can't know about — keep
   embed-only tweaks here so the generated sheets stay pure (regenerable).
   ════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP · hide the POS's own chatbot ─────────────────────────────
   The desktop POS ships its own chatbot FAB + panel (.cb-fab / .cb-panel,
   inside .pos-retail-desk). The dashboard already has a global chatbot, so
   the two FABs would stack. Hide the POS one (scoped to the wrapper, so the
   dashboard's chatbot — which lives outside .pos-retail-desk — is untouched).
   The chatbot JS still runs harmlessly; only the UI is hidden. */
.pos-retail-desk .cb-fab,
.pos-retail-desk .cb-panel { display: none !important; }

/* ── DESKTOP · hide the post-payment "Subscribe to POS" marketing block ────
   The success screen's conversion CTA (.pos-success__convert--marketing) is
   redundant inside the dashboard, which has its own Subscribe flow. Hidden here
   — scoped to the wrapper — so the generated module AND the member-owned source
   (views/pos/pos-landing.html) stay untouched and regenerate-safe. The block's
   JS (bindPostPaymentConvert) still binds harmlessly to the hidden element. */
.pos-retail-desk .pos-success__convert--marketing { display: none !important; }

/* NOTE: marketing chrome (nav/hero/sales/footer) is now TRULY removed in
   tools/regenerate.py (DESK_STRIP_MARKUP / DESK_STRIP_CSS) — markup + dead
   CSS dropped from the generated module — not hidden here. Add new strips there. */

/* ── DESKTOP · full-viewport WHITE demo surface ───────────────────────
   POS Retail should read as a clean white app filling the whole dashboard
   view. It only renders >900px, where the panel padding is a constant 20px
   sides / 20px bottom (.dash-main), so we break out of that to bleed the white
   to the panel's left, right and bottom edges; the inner 24px side gutter is
   restored via padding. flex:1 0 auto (root + section) lets the white fill the
   viewport height without clipping the tall demo content on short screens. */
.pos-retail-desk {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.pos-retail-desk .pos-demo-section {
  background: var(--color-canvas);
  flex: 1 0 auto;
  margin: 0 -20px -20px;
  padding: var(--space-4) 24px var(--space-12);
}

/* 2) Put "Customize your demo" on its OWN full-width row ABOVE the preview
   (single-column grid), instead of as a 280px left sidebar. This hands the
   preview the whole panel width, so the dual-screen (staff‖customer) fits
   side-by-side at typical widths — at a 1440 screen the preview is now
   ~1140px (was ~780px), clearing the 1024px container threshold below, so
   staff and customer stay on the same row. The config is no longer a sticky
   sidebar, so make it static and drop the standalone's viewport max-height
   cap (it was there only for the sticky-scroll sidebar). */
.pos-retail-desk .pos-demo-grid {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
/* …including while collapsed — the generated `.pos-demo-grid.is-config-collapsed`
   rule (scoped, so (0,3,0)) would otherwise revert to the standalone's `48px 1fr`
   sidebar and put the collapsed bar BESIDE the preview. Match its specificity to
   keep the bar stacked on top. */
.pos-retail-desk .pos-demo-grid.is-config-collapsed {
  grid-template-columns: 1fr;
}
.pos-retail-desk .pos-config {
  /* relative (NOT static): the collapse toggle is position:absolute and anchors
     to its nearest positioned ancestor. As `static` the config gave it no anchor,
     so the toggle flew to the top-right corner UNDER the sticky .dash-topbar
     (z-index 10 > toggle's 5) and became unclickable — you couldn't collapse.
     `relative` re-anchors it to the card (non-sticky, unlike the standalone). */
  position: relative;
  /* …but `relative` (unlike `static`) HONORS the `top` offset the standalone
     set for its sticky sidebar (`top: calc(nav-height + space-4)` ≈ 76px),
     which shifted the card down 76px WITHOUT moving its grid slot → it
     overlapped the preview below it. Clear it. */
  top: auto;
  max-height: none;
  overflow-y: visible;
}
/* Lay the controls out as a compact 3-COLUMN settings bar (title + lead span
   the top), to minimise height:
     col 1 — Business type (spans the 2 stacked rows on its left)
     col 2 — Business name  ↑ stacked
             Brand color    ↓
     col 3 — Allow Dual Pricing ↑ stacked
             Industry context   ↓
   Fields are addressed by the id they wrap (:has(#…)); the hidden Seasonal
   field is display:none so it takes no cell; the standalone's between-section
   dividers are meaningless in a grid, so hide them. Scoped to
   :not(.is-collapsed) so the collapse toggle keeps its own layout. */
.pos-retail-desk .pos-config:not(.is-collapsed) {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 14px;
  align-items: start;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__title {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 0;
}
/* Lead line ("Personalize the POS to match your business…") removed per
   request — frees the row, so fields now sit at rows 2-3 under the title. */
.pos-retail-desk .pos-config__lead {
  display: none;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__field {
  margin-bottom: 0;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__field:has(#industryList) {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__field:has(#bizNameInput) {
  grid-column: 2;
  grid-row: 2;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__field:has(#swatchList) {
  grid-column: 2;
  grid-row: 3;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__field:has(#dualPricingInput) {
  grid-column: 3;
  grid-row: 2;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__field:has(#hintsList) {
  grid-column: 3;
  grid-row: 3;
}
.pos-retail-desk .pos-config:not(.is-collapsed) > .pos-config__divider {
  display: none;
}

/* Business type tiles: lay icon + name on ONE row (was stacked) so the 2×3
   grid of industries is short — the single biggest height saver here. */
.pos-retail-desk .pos-industry {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
}
.pos-retail-desk .pos-industry__emoji {
  margin-bottom: 0;
  font-size: 15px;
}

/* Collapsed state = a slim full-width header bar (title left, chevron right)
   you click to re-expand — instead of the standalone's bare centered chevron
   (designed for its 48px sidebar). The grid stays one column (config bar over
   preview), so collapsing just frees vertical space. */
.pos-retail-desk .pos-config.is-collapsed {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  padding: 12px 16px;
}
.pos-retail-desk .pos-config.is-collapsed > .pos-config__title {
  display: block;
  margin: 0;
  order: -1;                 /* title on the left, chevron on the right */
}
.pos-retail-desk .pos-config.is-collapsed .pos-config__toggle {
  position: relative;
  top: auto;
  right: auto;
}

/* 3) Safety net: stack the dual-screen by the PREVIEW's own width when the
   panel is genuinely too narrow (small screens). With the config on its own
   row the preview is usually wide enough for side-by-side, but the
   standalone decides staff‖customer vs stacked from the VIEWPORT
   (@media 1024px), which doesn't reflect the embed's panel width. A
   CONTAINER query makes the stage respond to its OWN width: below a 1024px
   preview the staff order would be crushed (the cart's `minmax(300px,…)`
   leaves the item grid ~104px → it clips, "bể"), so fall back to the exact
   stacked layout the standalone uses below a 1024px viewport. Above that the
   dual-screen stays side-by-side automatically. */
.pos-retail-desk .pos-preview {
  container-type: inline-size;
}
@container (max-width: 1024px) {
  .pos-retail-desk .pos-stage {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pos-retail-desk .pos-staff {
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 24px;
  }
  .pos-retail-desk .pos-staff::after { display: none; }
  .pos-retail-desk .pos-customer { min-height: 420px; }
}

/* ── MOBILE · CTA-gated fullscreen demo (mirrors Payment Gateway) ──────
   The mobile POS no longer renders in a mini phone frame. The dashboard view
   shows a single "Tap to view demo" CTA card (.pos-mobile-cta); tapping adds
   .is-demo-open to the .pos-mobile-embed wrapper (see pos.js), which reveals a
   dark top bar and the POS app FULLSCREEN with no bezel.

   The app's own standalone "embed mode" (pos-retail-mobile.css) already strips
   the device bezel and fills the viewport via 100dvh — so here we just gate it
   behind the CTA and trim the screen height to sit under the bar.

   State lives on the wrapper (NOT <body>), so switching tabs — which re-renders
   #dash-view and destroys the wrapper — auto-resets the demo; the body
   scroll-lock + FAB-hide hang off :has() for the same self-cleaning reason. */

.pos-mobile-embed { width: 100%; }

/* Default state — only the CTA shows; the bar + the live app are hidden. */
.pos-mobile-embed .pos-mobile-bar  { display: none; }
.pos-mobile-embed .pos-mobile-host { display: none; }

/* CTA card — same dark look as Payment Gateway's pay-mobile-cta. */
.pos-mobile-cta { display: block; padding: var(--space-4) 0; }
.pos-mobile-cta__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  background: var(--color-ink);
  color: var(--color-canvas);
  border: 0;
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.pos-mobile-cta__card:active { transform: scale(.98); }
.pos-mobile-cta__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .12);
  color: var(--color-canvas);
  flex: 0 0 auto;
}
.pos-mobile-cta__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, .7);
}
.pos-mobile-cta__text strong {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-canvas);
}
.pos-mobile-cta__arrow { color: var(--color-canvas); opacity: .8; flex: 0 0 auto; }

/* Dark "Live demo + Exit" bar — look only; positioning happens when open. */
.pos-mobile-bar__title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-canvas);
}
.pos-mobile-bar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success);
}
.pos-mobile-bar__exit {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  color: var(--color-canvas);
  border: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.pos-mobile-bar__exit:hover  { background: rgba(255, 255, 255, .2); }
.pos-mobile-bar__exit:active { transform: scale(.96); }

/* ── Demo OPEN — reveal the dark bar + the POS app fullscreen (no bezel). ── */
body:has(.pos-mobile-embed.is-demo-open) { overflow: hidden; }

.pos-mobile-embed.is-demo-open .pos-mobile-cta { display: none; }

.pos-mobile-embed.is-demo-open .pos-mobile-bar {
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-3)) var(--space-4) var(--space-3);
  background: var(--color-ink-dark);
}

.pos-mobile-embed.is-demo-open .pos-mobile-host {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  padding-top: calc(56px + env(safe-area-inset-top, 0px));   /* clear the fixed bar */
  background: var(--color-canvas);
  overflow: hidden;
}
/* Fill the host exactly: drop the standalone embed-mode's 100dvh min-heights
   (they'd run 56px past the bottom under the bar) and trim the scrolling screen
   to the space below the bar. Everything else (no bezel, app fills the screen)
   the standalone's own embed mode already does. */
.pos-mobile-embed.is-demo-open .pos-mobile-host .pos-retail-mobile,
.pos-mobile-embed.is-demo-open .pos-mobile-host .shell,
.pos-mobile-embed.is-demo-open .pos-mobile-host .stage { min-height: 0; }
.pos-mobile-embed.is-demo-open .pos-mobile-host .screen,
.pos-mobile-embed.is-demo-open .pos-mobile-host .screen--staff {
  height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
  border-radius: 0;
}

/* ── Scroll-lock behind popups ──
   The app's sheet/drawer backdrops are absolute overlays that don't capture
   scroll, so dragging on the dimmed backdrop scrolled the view's product list
   underneath ("scroll xuống"). Freeze the background scroller — .scroll-area is
   each view's single `flex:1; overflow-y:auto` container — whenever a popup
   backdrop is open. The popup's own body keeps scrolling: sheets use .sheet and
   the drawer uses .drawer__nav, never .scroll-area. :has() so it's automatic on
   open/close — no JS, no regeneration. */
.pos-retail-mobile:has(.sheet-backdrop.is-open) .scroll-area,
.pos-retail-mobile:has(.drawer-backdrop.is-open) .scroll-area {
  overflow: hidden;
}

/* Let bottom-sheets use (almost) the full screen height. The standalone caps
   them at max-height:92%, which on a phone sat ~41px short of the tallest sheet
   (e.g. a product's size + colour + add-ons + "Add to order" CTA) — forcing a
   scroll just to reach the button. The fullscreen demo screen is tall enough to
   show the whole sheet, so raise the cap: sheets that fit no longer scroll at
   all; only genuinely taller-than-screen content still does. A small top gap
   keeps the dim "tap above to dismiss" peek. */
.pos-mobile-embed.is-demo-open .pos-mobile-host .sheet {
  max-height: calc(100% - 12px);
}

/* Hide the dashboard's floating AI-agent FAB only while the demo is fullscreen
   (fixed bottom-right — it would overlap the app). In the CTA state it stays. */
body:has(.pos-mobile-embed.is-demo-open) .dash-agent-fab,
body:has(.pos-mobile-embed.is-demo-open) .cb-fab {
  display: none !important;
}