/* Booking Board management UI (dashboard + editor) * Plan: docs/plans/BOOKING-BOARD-DEFINITIVE-BUILD-PLAN-2026-06-20.md §4 Stage 5 * Loaded after style.css so these rules win; scoped to .bb-* / .bb-modal. */ /* Overlay container. booking-board-dashboard.js mounts *
straight onto , but the project * has no base `.modal-overlay` rule (other modals are inline in index.html and * style their own wrappers), so without this the overlay rendered as an * unpositioned, invisible static block at the foot of the page — tapping * "Booking board" did nothing. Give it the standard full-viewport scrim + * centred dialog. */ .bb-overlay { position: fixed; inset: 0; z-index: var(--z-modal, 3000); display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); overflow-y: auto; overscroll-behavior: contain; animation: bbOverlayIn 0.18s ease-out; } @keyframes bbOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* On phones the dialog should use the full width and not get clipped by the * viewport — cap its height and let the body scroll inside. */ @media (max-width: 640px) { /* The whole screen, square (owner 2026-10-30, "close the gap, for this and bookings ... these various areas can use the greater height"), as Plan a meeting and Share days. */ .bb-overlay { padding: 0; align-items: stretch; } .bb-overlay .bb-modal { max-width: 100%; min-height: 100dvh; max-height: 100dvh; border-radius: 0; } .bb-overlay .bb-modal > :last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .bb-modal { max-width: 640px; width: 100%; } /* Rounded BOTTOM (2026-07-20, user: "the bottom of the booking board is currently square"). The panel inherits a full border-radius from the base .modal-content, but the pinned .modal-footer action bar at the bottom carries its own --surface-secondary background + top border and, as the last flex child filling the panel's bottom edge, its square corners showed through (the parent's overflow-clip rounds the panel box, but the footer's opaque fill reads as a square shelf inside it). Round the footer's bottom corners to match the panel so the whole board ends in a clean radius. Belt-and-braces: also pin the panel radius explicitly so a future base-token change can't re-square it. */ .bb-modal { border-radius: var(--radius-2xl, 20px); overflow: hidden; } .bb-modal .modal-footer, .bb-modal .bb-editor-footer, /* WHATEVER ENDS THE PANEL (2026-08-14, user: "Booking board initially loads with a jagged rather than rounded bottom"). The rule rounded only the FOOTER - but show() mounts header + body with NO footer, so during "Loading..." the last child is .modal-body, an opaque square-cornered surface painting over the rounded panel. */ .bb-modal > :last-child { border-bottom-left-radius: var(--radius-2xl, 20px); border-bottom-right-radius: var(--radius-2xl, 20px); } /* The base `.modal-content` rule (style.css) caps the dialog at max-height:90vh * with overflow:hidden and lays its children out as a flex column. The booking * board now adopts the app-canonical shell — `.modal-header` (pinned) / * `.modal-body` (the large scrollable white area: padding, flex:1, overflow-y: * auto) / `.modal-footer` (pinned action bar). `.bb-body` keeps its class only as * a scoping hook for the booking-board-specific field styles below; it inherits * all its scroll/padding/white surface from `.modal-body`. Scoped so every other * modal that shares `.modal-content` is untouched. */ .bb-modal { display: flex; flex-direction: column; } .bb-modal .modal-header { flex-shrink: 0; } .bb-loading, .bb-error { padding: 24px 4px; color: var(--text-secondary, #64748b); } .bb-error { color: var(--danger-fg, #b91c1c); } /* ⭐2026-08-20 (owner: "New booking board area still has a lot of scrollable space"). The editor's inline form-error box ships as `