/* ════════════════════════════════════════════════════════════════════
   Payment Gateway — embed deltas for the dashboard (hand-written)
   Loaded AFTER payment-gateway.css so it wins. Houses the few adjustments
   the standalone can't know about — keep embed-only tweaks here so the
   generated sheet stays pure (regenerable via tools/regenerate-payment.py).
   ════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP/MOBILE · don't become a nested scroll-box ─────────────────
   The standalone is a full page that scrolls in the window. Mounted in the
   dashboard, the scoped `html, body { overflow-x: hidden }` lands on
   `.payment-gateway`, which (per spec) forces overflow-y → auto, turning the
   wrapper into its OWN scroll container. The dashboard shell locks #dash-view
   to the viewport height, so as a default flex item the wrapper got SHRUNK
   below its content and scrolled internally — clipping the tall device-wrap
   (the Charge/Cash buttons fell off the bottom).

   flex:1 0 auto (shrink 0, auto basis) makes the wrapper take its FULL content
   height instead, so nothing is clipped and the dashboard's own .dash-main
   provides the page scroll — same feel as the standalone. (Same idea as
   pos-retail-embed.css's `.pos-retail-desk { flex: 1 0 auto }`.) */
.payment-gateway {
  flex: 1 0 auto;
  min-height: 0;
}

/* ── DESKTOP · keep the Bamboo device at its standalone size ───────────
   The dashboard content area is ~300px narrower than the standalone's full
   page, so the proportional `1fr : 1.7fr` device column gives the device
   row only ~390px → the fixed-384px device flex-shrinks to ~316px and looks
   cramped / unlike the standalone. Give the device its OWN fixed-width column
   (sized to the 384px device + the card's padding) and stop it shrinking,
   whenever the dashboard row is wide enough for it to sit beside the
   transactions; below that, fall back to the standalone's stacked layout.
   A container query (not @media) so it responds to the ACTUAL panel width,
   not the viewport — the sidebar/collapse state changes the panel width
   without changing the viewport. (Same approach as pos-retail-embed.css.) */
.payment-gateway .pay-dash { container-type: inline-size; }
@container (min-width: 900px) {
  .payment-gateway .pay-dash__grid {
    grid-template-columns: 480px minmax(0, 1fr);
  }
  .payment-gateway .pay-dash__device-wrap .pay-device { flex-shrink: 0; }
}
@container (max-width: 899.98px) {
  .payment-gateway .pay-dash__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Below 1200px · iPad-like layout ───────────────────────────────────────
   On desktop the dashboard shows device + data side-by-side. Below 1200px the
   panel is too narrow for that — mirror the standalone's mobile layout instead:
   hide the device preview column, show the mobile CTA card (tap → fullscreen
   device demo), leave only the Transactions/Report panel visible. Same look as
   the ≤767px mobile layout from the generated sheet, but triggered earlier for
   the narrower dashboard context. */
@media (max-width: 1199px) {
  .payment-gateway .pay-dash[data-layout] .pay-dash__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .payment-gateway .pay-dash-section .pay-dash__right { display: none; }
  .payment-gateway .pay-mobile-cta {
    display: block;
    grid-column: 1 / -1;
    order: -1;
  }
}

/* ── TXN DETAIL POPUP · Refund button right-edge gap ───────────────────
   #txnDetailModal's scroller (overflow:auto) shows a space-taking scrollbar
   once its content overflows. The sticky full-width Refund button is
   width:100% of the scroller's CONTENT box (minus that scrollbar gutter), so
   it stops a few px short of the panel's right edge — leaving a sliver of the
   panel background beside it ("hở"). The standalone uses the OS overlay
   scrollbar (no gutter), so it never shows this. Hide the scrollbar on this
   scroller (content still scrolls) so the button spans the full panel width —
   matching the standalone. Same pattern as .pay-dash__status-tabs /
   .sub-detail__feats elsewhere. */
.payment-gateway .pay-modal--txn .pay-modal__scroller {
  scrollbar-width: none;                 /* Firefox */
}
.payment-gateway .pay-modal--txn .pay-modal__scroller::-webkit-scrollbar {
  display: none;                         /* Chromium / WebKit — no gutter */
}

/* ── CONGRATS → COMPLETE · "giật" (one-frame vertical jump) ────────────
   Every device screen is a .pay-view { position:absolute; inset:0 } so they
   overlap and cross-fade. But .pay-congrats and .pay-complete override that
   with `position: relative` (in the source — meant to host the .pay-confetti
   layer, but .pay-view is ALREADY a positioned containing block, so it's
   redundant). Relative drops them into normal flow, so during the 240ms
   cross-fade the incoming Complete stacks BELOW the outgoing Congrats, then
   snaps up to the top when Congrats is removed → a visible jump right before
   "Payment complete" shows. Force them back to absolute so they overlap and
   fade cleanly like every other screen (inset:0 still comes from .pay-view;
   confetti + z-index layering keep working — the element stays positioned). */
.payment-gateway .pay-congrats,
.payment-gateway .pay-complete {
  position: absolute;
}

/* ── Transaction detail · on-device settle action ─────────────────────
   The on-device history detail (tpl-txn-detail) now shows a sticky settle
   action pinned in a footer — Void for card/wallet, Refund for cash/gift
   (see styles/payment-gateway.css → .pay-txn-detail__footer). It used to be
   hidden here as "read-only"; it's now an active demo control, so no hide
   rule. (The old .pay-tx__refund dashboard-popup bar no longer exists — the
   dashboard detail uses .pay-txd__action-btn, which was never hidden here.) */

/* ── ON-DEVICE TXN DETAIL · Tip row lopsided on mobile ─────────────────
   The Tip section renders headline('', amount, Edit-Tip) — an EMPTY first
   column (no date/badge like the Summary headline has). At ≤720px the source
   collapses the headline to a 2-col `1fr 1fr` grid, so the empty main column
   stranded the amount in the RIGHT cell (looks centered) and the chip wrapped
   full-width onto the next row → lopsided/messy.
   When the main column is empty, drop the grid and lay the row out simply:
   amount on the left, Edit-Tip chip on the right, same baseline. Scoped to the
   empty-main headline via :has() so the Summary headline (main has content) is
   untouched, and gated on the SAME 720px breakpoint as the source rule so it
   only kicks in exactly when that broken 2-col layout is active. */
@media (max-width: 720px) {
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:empty) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:empty) > .pay-txd__headline-main {
    display: none;
  }

  /* Summary / Refund headlines (main = timestamp + status badge) → tidy 2×2 grid:
       row 1:  date            │  amount
       row 2:  status badge    │  Receipt
     The badge lives INSIDE .pay-txd__headline-main (stacked under the date) while
     the amount + Receipt are its grid siblings, so `display:contents` on the main
     wrapper promotes the date + badge to grid items — letting the badge share a
     row with the Receipt chip. 1fr/auto columns + justify-self pin labels left /
     amount+chip right (the "space-between" look). Fixes the old layout where the
     timestamp wrapped, the amount was cramped, and Receipt sat full-width alone. */
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:not(:empty)) {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
  }
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:not(:empty)) > .pay-txd__headline-main {
    display: contents;
  }
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:not(:empty)) .pay-txd__date {
    grid-area: 1 / 1;                       /* date — row 1, left */
  }
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:not(:empty)) > div:not(.pay-txd__headline-main) {
    grid-area: 1 / 2; justify-self: end;    /* amount — row 1, right */
  }
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:not(:empty)) .pay-txd__badge {
    grid-area: 2 / 1; justify-self: start;  /* status badge — row 2, left */
  }
  .payment-gateway .pay-txd__headline:has(> .pay-txd__headline-main:not(:empty)) .pay-txd__chip-btn {
    grid-area: 2 / 2; justify-self: end;    /* Receipt — row 2, right (space-between) */
  }
}

/* ── POS-connected · keep the Transactions / Report tab switcher ───────
   The generated sheet hides the data-tab switcher in POS mode
   (.pay-dash[data-layout="pos"] .pay-dash__data-tabs { display:none }) — the
   standalone treats POS as a "transactions-only live mirror". For the demo we
   keep the switcher visible so Report stays reachable in POS-connected too (it
   renders fine in the POS layout). Pairs with the regen tweak (step 7) that
   stops setMode from force-resetting the active tab to Transactions, so the
   selected Transactions/Report tab persists across Standalone <-> POS. */
.payment-gateway .pay-dash[data-layout="pos"] .pay-dash__data-tabs {
  display: inline-flex;
}

/* ── Device preview · uniform content scale for the narrow POS column ──
   The phone screen scales with its column (aspect-ratio 9/19) but its content
   is sized in fixed px for a full-size phone. In POS-connected at ~1440 the
   middle terminal column is narrow (screen ≈ 237px), so tall screens — most
   visibly "Add a Tip" (4 big % cards) — overflowed the ~440px screen body and
   clipped at the bottom. Rather than tweak each screen, scale the whole screen
   body down UNIFORMLY so every screen keeps its proportions and fits. `zoom`
   (not transform) reflows, and the body's flex height holds while its content
   lays out in the zoomed coordinate — so it fills the screen with no empty gap.

   Two container-width bands (desktop-only via min-width:901px guard):
     ≤ 250px  → POS preview (≈237px): zoom 0.68 — tip content 649px × 0.68 = 441px
               fits the 448px rendered body (7px spare). Custom Tip + No tip visible.
     251–320px → Standalone preview (≈288px): zoom 0.74 — content fits the taller
               555px rendered body with proportional margins; no need to go smaller.
   Mobile fullscreen and wider previews keep full size (no zoom). */
.payment-gateway .pay-dash__device-wrap .pay-screen { container-type: inline-size; }
@media (min-width: 901px) and (max-width: 1440px) {
  @container (max-width: 300px) {
    /* POS preview — layout/offsetWidth ≈ 276px (rendered ≈ 237px).
       Tip content 649px × 0.68 = 441px fits in the 448px rendered body. */
    .payment-gateway .pay-dash__device-wrap .pay-statusbar,
    .payment-gateway .pay-dash__device-wrap .pay-screen__body { zoom: 0.68; }
  }
  @container (min-width: 301px) and (max-width: 380px) {
    /* Standalone preview — layout/offsetWidth ≈ 320–360px (rendered ≈ 288px).
       Tip fits comfortably at 0.74; content 649px × 0.74 = 480px < 555px body. */
    .payment-gateway .pay-dash__device-wrap .pay-statusbar,
    .payment-gateway .pay-dash__device-wrap .pay-screen__body { zoom: 0.74; }
  }
}

/* ── POS Checkout · customer card phone number wrap ────────────────────────
   At 1440 the POS column is narrow enough that "(415) 555-0148" breaks at the
   space and the hyphen. The phone is a single datum — never wrap it. */
.payment-gateway .pay-dash__pos-cust-phone { white-space: nowrap; }

/* ── Report KPI cards · fix 3+1 wrap in POS mode ───────────────────────────
   rpt-kpis uses `auto-fit minmax(150px,1fr)` — in POS-connected the right panel
   is narrower, so auto-fit resolves to 3 columns and the 4th card drops to row 2
   (3+1 layout, uneven). Force 2×2 in POS-connected at desktop so the grid is
   always balanced regardless of panel width. Mobile (handled by the generated
   sheet at 1fr) is unaffected. */
@media (min-width: 901px) {
  .payment-gateway .pay-dash[data-layout="pos"] .rpt-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}