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

/* ── DESKTOP · don't become a nested scroll-box ─────────────────────
   Same pattern as payment-gateway-embed.css: the dashboard locks
   #dash-view to the viewport height, so without flex:1 0 auto the
   wrapper shrinks and scrolls internally. Let the dashboard shell
   (.dash-main) provide the page scroll instead. */
.booking-desk {
  flex: 1 0 auto;
  min-height: 0;
}

/* ── Override page-level sizing on the .app / body equivalents ───────
   The standalone sets min-height:100vh on body (→ .booking-desk) and
   on .app. In the embed those force the panel taller than the viewport.
   min-height:0 lets the content drive the height as normal. */
.booking-desk .app {
  min-height: 0;
  grid-template-columns: 1fr;   /* no sidebar column in the embed */
}

/* ── Full-View / modal overlays · clear the global header ─────────
   The prototype's overlays are `position:fixed` but live inside `.booking-desk
   .app`, which the standalone sets to position:relative; z-index:1 — a STACKING
   CONTEXT. That traps their z-index inside `.app`, so within the dashboard shell
   (`.dashboard` is an isolation:isolate context) the whole booking app sits at
   z:1, BELOW the sticky global header (`.dash-topbar`, z:10) — which then paints
   over the top strip of the overlay.
   This affects every fixed overlay in the booking app:
     • the "Booking Page Review" Full View iframe (`.proto-frame.proto-full`), and
     • the modal popups (`.bm-modal`, `.fv-modal`, `.bn-modal`, `.bd-modal`,
       `.svp-modal`, `.fv-sp` — all opened with `.on`), e.g. Booking Management's
       "Full view" calendar.
   On tall screens a centered modal box clears the header so the bug hides; on
   short screens the box reaches into the header strip and it shows — so fix at
   all sizes. While any overlay is open, lift the booking app above the header.
   Gated by :has() so normal layering (header over booking content) is untouched. */
.booking-desk .app:has(.proto-frame.proto-full),
.booking-desk .app:has([class*="-modal"].on),
.booking-desk .app:has(.fv-sp.on) {
  z-index: 100;   /* > .dash-topbar (z:10), within .dashboard's isolate context */
}

/* ── …and don't let 100vw/100vh overflow the app shell (right edge clipped) ──
   The generated rule sizes the fullscreen iframe to width:100vw; height:100vh.
   But `.dashboard` carries `backdrop-filter`, which (per spec) makes it the
   containing block for position:fixed descendants — so the iframe is sized/
   positioned against `.dashboard`, not the viewport. `inset:0` already pins it
   to `.dashboard`'s box; the extra 100vw/100vh then runs PAST `.dashboard`'s
   right/bottom edges (it sits 16px in from the viewport via the shell's margin)
   and `.dashboard { overflow:hidden }` clips the overflow — cutting off the
   right-hand "Exit full view" button in the `.chrome` bar.
   Fill the containing block instead. The iframe is a replaced element, so it
   can't stretch via inset alone — give it explicit 100% to match `.dashboard`. */
.booking-desk .proto-frame.proto-full {
  width: 100%;
  height: 100%;
}

/* ── ≤1600px · Notification + Management share one column (stacked) ─────────
   Default desktop `.cols` is 3 columns: Review | Booking Notification | Booking
   Management. From 1600px down to the 1180px mobile collapse, drop to 2 columns:
   Review on the left (spanning both rows), and the two sidebar panels stacked in
   the right column — Notification on top, Management below. Goal: left column
   (Review) and right column (Notification + Management) are the SAME height, so
   their bottoms line up (no stagger).

   KEY: the standalone's JS height-syncs the three panels by writing an INLINE
   `height:<Review's height>` onto Booking Notification (.promo) and Booking
   Management (.activity) so all three match in the 3-column layout. Stacked into
   2 columns that inline height makes each right panel full-height (they overflow
   / stagger). We can only beat an inline style with `!important`, so:
     • `.cols` gets the definite height (= Review's own `min(80vh,760px)`) — the
       anchor the iframe chain needs (without it the height:100% preview blows the
       grid up to 2^24px, and `1fr` can't resolve against an auto-height grid).
     • Booking Notification: `height:auto !important` → drop the inline height,
       hug its content (trimmed to 2 cards), row 1 `auto`.
     • Booking Management: `height:auto !important` + `align-self:stretch` → drop
       the inline height and fill row 2 `minmax(0,1fr)` (the remainder under
       Notification), its calendar scrolling internally as in the default layout.
     • Review: `height:100% !important` → fill the grid span via `.cols`'s height
       instead of imposing its own (a fixed height here would inflate the auto
       row 1 and starve Management).
   Result: Notification + gap + Management == Review's height, bottoms aligned.
   (Scoped so ≤1180px keeps the generated single-column collapse untouched.) */
@media (min-width: 1181px) and (max-width: 1600px) {
  .booking-desk .cols {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr);   /* Notification hugs; Management fills the rest */
    height: min(80vh, 760px);                  /* definite anchor = Review's own height */
    min-height: 560px;
  }
  .booking-desk .panel.rev {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: stretch;
    height: 100% !important;   /* fill the span; override the JS height-sync inline height */
    min-height: 0 !important;
  }
  .booking-desk .panel.promo {
    grid-column: 2; grid-row: 1;
    align-self: start;
    height: auto !important;   /* drop the inline height → Notification hugs its content */
  }
  /* …and don't let its list flex-fill the row, so the panel hugs. */
  .booking-desk .panel.promo #bnList { flex: 0 0 auto; }
  .booking-desk .panel.activity {
    grid-column: 2; grid-row: 2;
    align-self: stretch;
    height: auto !important;   /* drop the inline height → fill the remainder, calendar scrolls */
    min-height: 0;
  }

  /* Show only the first 2 notification cards inline (Show all still opens the
     full feed). */
  .booking-desk #bnList .bn-card:nth-of-type(n+3) { display: none; }
}

/* ── ≤768px · Mobile (single column, stacked) ───────────────────────────────
   The ≤1180px rule (generated) already collapses `.cols` to one column. On
   phones we additionally:
     • drop the `.main` wrapper's padding + background so the panels get the full
       width (content a bit bigger);
     • let Notification & Management HUG their content instead of the JS-synced
       ~80vh height (which stacked into a very tall, mostly-empty page) — so the
       page needs far less scrolling. Notification shows its first 2 cards;
       Management keeps its calendar but capped + scrolling internally so it
       stays compact rather than expanding to the full month.
   (Default-to-Mobile preview + the Desktop "only on desktop" notice + the
   chrome compaction are handled inside the iframe by booking.js.) */
@media (max-width: 768px) {
  /* req1 — bigger content area: drop the wrapper padding AND the booking module's
     own page background. `.main` is already transparent — the colour you see is
     `.booking-desk`'s own background (rgb(244,242,248)); clear it so the panels
     sit directly on the dashboard page background. */
  .booking-desk { background: none; }
  .booking-desk .main { padding: 0; background: none; }

  /* req5 — hug Notification (2 cards) and Management so mobile doesn't scroll
     through empty space. Both panels carry a JS-synced inline height → !important. */
  .booking-desk .panel.promo { height: auto !important; }
  .booking-desk .panel.promo #bnList { flex: 0 0 auto; }
  .booking-desk #bnList .bn-card:nth-of-type(n+3) { display: none; }

  /* Management: cap to a compact height and let its calendar scroll inside,
     rather than the synced ~80vh or the full-month content height. */
  .booking-desk .panel.activity { height: auto !important; }
  .booking-desk .panel.activity .ba-app { max-height: 56vh; }

  /* Drop Booking Management's "Full view" button on mobile (the full-screen
     modal isn't a mobile-friendly view). */
  .booking-desk .panel.activity .bm-fullbtn { display: none; }
}