/* ════════════════════════════════════════════════════════════════════
   POS Retail — embed deltas for the v7 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; }

/* NOTE: marketing chrome (nav/hero/sales/footer) is now TRULY removed in
   v7/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 · demo section sits directly in the dashboard panel ───────
   1) Drop the standalone's full-width grey "surface" band — the dashboard
      panel already supplies the background — and trim the marketing band's
      tall top/bottom padding (the band that justified it is gone). The 24px
      side padding stays (base rule) so the cards keep a gutter from the
      panel edge. */
.pos-retail-desk .pos-demo-section {
  background: transparent;
  padding-top: var(--space-4);
  padding-bottom: var(--space-6);
}

/* 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 (P8) · render inside a phone frame ─────────────────────────
   The standalone's "embed mode" flattens its built-in .device/.screen
   phone frame to 100vh — it assumes it owns an <iframe>'s viewport. Mounted
   natively in a naturally-scrolling dashboard panel, that 100vh pushed the
   bottom mini-cart bar off-screen. We restore the device's OWN phone frame
   (already in the markup: .stage > .device > .screen > .app) at a
   viewport-fitting height, so the product list scrolls *inside* the phone,
   the mini-cart bar pins to the phone's bottom, and every sheet/drawer/
   toast (all position:absolute) stays confined to the screen — same idea as
   the other tabs' phone previews. CSS-only; no JS, no regeneration. */

.pos-retail-mobile {
  min-height: 0;                 /* was 100vh — let the wrapper hug the phone */
  max-width: 100%;
  overflow-x: hidden;            /* DEFENSIVE: never let inner content widen the page */
  background: transparent;
  padding: 8px 0;
}
.pos-retail-mobile .shell {
  min-height: 0;
  width: 100%;
  min-width: 0;
  overflow-x: hidden;            /* DEFENSIVE */
  padding: 0;
}

.pos-retail-mobile .stage {     /* center the phone in the panel */
  /* NOT display:flex — a flex *item*'s percentage width resolves against the
     wrong basis (we saw it come out 400px in one view and 6px in another). A
     block stage with text-align:center centers the inline-flex phone, and the
     phone's `min(360px,100%)` then resolves normally against the stage. */
  display: block;
  text-align: center;
  min-height: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;             /* DEFENSIVE: clip the phone if it ever exceeds the panel */
}

/* Phone frame — a fixed-size dark bezel (the .chk-device--portrait / GCI look)
   that the POS app fills via flex. Deliberately a CONSTANT size so it never
   pulses; see the note on the rule below. */
.pos-retail-mobile .device,
.pos-retail-mobile .device--staff {
  position: static;
  /* inline-flex: inline-level so the stage's text-align:center centers it, AND a
     flex column container so the screen + app fill it. width now resolves
     reliably (the phone is no longer a flex *item*). FIXED size → never pulses;
     no aspect-ratio, no vh/dvh/svh. */
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  text-align: left;              /* undo the stage's center for the POS content */
  width: min(360px, 100%);
  height: 720px;
  min-width: 0;
  padding: 3px;                  /* thin bezel so the screen keeps almost all the width */
  border-radius: 40px;
  background: linear-gradient(150deg, #2c2c2e 0%, #1a1a1c 55%, #2c2c2e 100%);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, .28),
    0 6px 14px rgba(0, 0, 0, .14),
    inset 0 0 0 1.5px rgba(255, 255, 255, .08),
    inset 0 0 0 6px #0a0a0c;
}

/* Screen fills the frame (flex:1); the POS app fills the screen (height:100%)
   and scrolls internally. overflow:hidden + position:relative (base rule) keep
   every sheet/drawer/toast clipped inside the phone. */
.pos-retail-mobile .screen,
.pos-retail-mobile .screen--staff {
  flex: 1;
  width: 100%;
  min-width: 0;                  /* same: don't let inner content widen the screen */
  min-height: 0;
  border-radius: 40px;
  overflow: hidden;
}
.pos-retail-mobile .app { height: 100%; }

/* Hide the dashboard's floating AI-agent FAB while the POS Retail phone is on
   screen (it's fixed bottom-right and overlaps the phone). :has scopes it to when
   the retail panel is visible AND the mobile POS is mounted, so the FAB returns on
   every other tab/section. .pos-retail-mobile only exists ≤900px. */
body:has(.seo-panel[data-panel="retail"]:not([hidden]) .pos-retail-mobile) .dash-agent-fab,
body:has(.seo-panel[data-panel="retail"]:not([hidden]) .pos-retail-mobile) .cb-fab {
  display: none !important;
}