/* ════════════════════════════════════════════════════════════════════════ MOBILE REDESIGN — clean-slate stylesheet for ≤768px viewports. Loaded LAST in so it wins every cascade conflict. Uses minimal selectors and !important on layout-critical rules. Layout model: html → body (block, no margin/padding except bottom for tab-bar) → .app (block, no min-height, no grid) → .sb (off-canvas drawer, position:fixed translateX(-100%)) → .main (block, content flows from y=0) → upgrade-banner (inline block, tight) → .page (block, small padding) → page content → .mobile-tabbar (position:fixed bottom) No element above .main may take vertical space. Period. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { /* ── ROOT-LEVEL RESET ──────────────────────────────────────────────── */ html, body { margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; height: auto !important; width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } body { /* Only padding-bottom for the fixed tab-bar (64px + safe-area) */ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; background: var(--trwn-warm-white, #FAF7F2) !important; } *, *::before, *::after { box-sizing: border-box !important; } /* Kill any browser-default top margin on first descendants */ body > *:first-child { margin-top: 0 !important; } /* ── APP CONTAINER — block, full width, no spacing ─────────────────── */ .app { display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; min-height: 0 !important; height: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* ── MAIN — block, starts at top of .app, no spacing ───────────────── */ .main { display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; flex: none !important; float: none !important; position: static !important; } /* ── PAGE — block with minimal padding ─────────────────────────────── */ .page { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 12px 24px !important; border: 0 !important; min-height: 0 !important; } /* ── SIDEBAR DRAWER — fixed, off-canvas. Inner .sb-nav scrolls so brand (top) and foot (account + logout + gear icon) stay pinned while the nav middle scrolls. */ .sb, .sidebar { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 300px !important; max-width: 88vw !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; z-index: 200 !important; transform: translateX(-100%) !important; transition: transform 0.28s cubic-bezier(.2, .7, .2, 1) !important; box-shadow: 4px 0 24px rgba(0,0,0,0.22) !important; overflow: hidden !important; background: var(--trwn-cream, #F5EFE3) !important; display: flex !important; flex-direction: column !important; } .sb .sb-brand, .sb .sb-wed-switcher, .sb .sb-foot { flex: 0 0 auto !important; } .sb .sb-nav { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .sb.open, .sidebar.open { transform: translateX(0) !important; } .sb.sb-dragging { transition: none !important; } /* ── SIDEBAR OVERLAY — backdrop when drawer is open ─────────────────── */ .sb-overlay, .sidebar-overlay { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(20,18,16,0.45) !important; z-index: 199 !important; margin: 0 !important; padding: 0 !important; } .sb-overlay.open, .sidebar-overlay.open { display: block !important; } /* ── BOTTOM TAB-BAR — fixed nav at viewport bottom ─────────────────── */ .mobile-tabbar { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 64px !important; margin: 0 !important; padding: 6px 0 max(6px, env(safe-area-inset-bottom, 6px)) !important; background: var(--trwn-warm-white, #FAF7F2) !important; border-top: 1px solid var(--trwn-sand-pale, #E8DFC9) !important; z-index: 150 !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important; } .mobile-tabbar .mt-tab { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; background: transparent !important; border: 0 !important; text-decoration: none !important; color: var(--trwn-warm-gray, #8B7355) !important; padding: 4px 2px !important; min-width: 0 !important; font-family: inherit !important; cursor: pointer !important; } .mobile-tabbar .mt-tab.is-active { color: var(--trwn-accent, #C4A882) !important; } .mobile-tabbar .mt-ic { width: 22px !important; height: 22px !important; stroke: currentColor !important; fill: none !important; } .mobile-tabbar .mt-lbl { font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.02em !important; } /* "New" badge on a tab icon / the menu button. */ .mobile-tabbar .mt-ic-wrap { position: relative !important; display: inline-flex !important; } .mobile-tabbar .mt-badge { position: absolute !important; top: -6px !important; left: 100% !important; transform: translateX(-55%) !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; box-sizing: border-box !important; border-radius: 999px !important; background: #C45B5B !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; line-height: 16px !important; text-align: center !important; box-shadow: 0 0 0 2px var(--trwn-warm-white, #FAF7F2) !important; } /* ── HIDE the legacy top mobile-header completely ───────────────────── */ .mobile-header, header.mobile-header { display: none !important; height: 0 !important; visibility: hidden !important; } /* ── PAGE-HEAD — title left, actions right, on ONE row ───────────── Eyebrow + sub are hidden so only the h1 remains, leaving room for the Acties dropdown (or other action buttons) on the same line. */ .page-head { margin: 0 0 12px 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: nowrap !important; } .page-head > div:first-child { min-width: 0 !important; flex: 1 1 auto !important; } .page-head .eyebrow, .page-head .sub { display: none !important; } .page-head h1 { font-size: 18px !important; line-height: 1.2 !important; margin: 0 !important; font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .page-head .actions { flex: 0 0 auto !important; flex-direction: row !important; flex-wrap: nowrap !important; width: auto !important; margin: 0 !important; } .page-head .actions .btn { flex: 0 0 auto !important; width: auto !important; } /* ── TRIAL BANNER — keep visible but tight ─────────────────────────── */ .trial-banner { margin: 0 0 8px 0 !important; padding: 6px 12px !important; font-size: 11px !important; } /* ── RSVP-STATS — 2-column grid on phones (used on dashboard, guests page, seating page). When there are exactly 3 cards (dashboard, seating), the 3rd one spans both columns so the layout stays balanced. With 4 cards (guests), all four sit in a clean 2×2. */ .rsvp-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .rsvp-stats > :nth-child(3):last-child { grid-column: 1 / -1 !important; } .rsvp-stat { padding: 10px 12px !important; } .rsvp-stat .num-serif { font-size: 24px !important; } .rsvp-stat .upper-eyebrow { font-size: 9px !important; } .rsvp-stat .rsvp-sub { font-size: 10px !important; } /* ── DRESSCODE — style picker 2 columns on phones (was minmax 140px auto-fill which can produce a single column on narrow viewports) */ .dc-style-card { padding: 14px 10px 12px !important; } /* Override the inline auto-fill grid via attribute selector on the wrapper (template uses repeat(auto-fill,minmax(140px,1fr)) inline). */ [style*="minmax(140px,1fr)"], [style*="minmax(140px, 1fr)"] { grid-template-columns: 1fr 1fr !important; } /* ── ALL MODALS — content-sized sheet with sticky header + action row ─ The `.modal` itself is the scroll container: `height:auto` lets short modals stay small (so e.g. the budget template modal isn't blown up to full height), capped by `max-height` after which the middle scrolls. The header and the action row (`.modal-footer` / `.modal-actions`) are `position:sticky`, so the add/cancel buttons stay visible while the content between them scrolls. Sticky resolves against the scrolling `.modal`, so this works for all three modal structures (canonical / legacy-bare / hybrid) no matter how deeply the button row is nested. A side + bottom gutter keeps the sheet off the screen edges and clear of the bottom tab-bar, and makes it narrower than the full width. Legacy modals are siblings of their backdrop, so the `.modal` must position itself (fixed). Canonical modals live inside a flex `.modal-overlay`, which re-positions them to relative further down. */ .modal { position: fixed !important; left: 10px !important; right: 10px !important; bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; width: auto !important; max-width: 460px !important; margin: 0 auto !important; height: auto !important; max-height: 82dvh !important; transform: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; background: #fff !important; border-radius: 18px !important; box-sizing: border-box !important; z-index: 1000 !important; padding: 0 !important; } /* Undo the old absolute-fill layout so the content flows normally and the whole modal scrolls as one column. */ .modal .modal-content { position: static !important; inset: auto !important; display: block !important; overflow: visible !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; } .modal .modal-header { position: sticky !important; top: 0 !important; z-index: 5 !important; padding: 14px 16px 12px !important; border-bottom: 1px solid var(--trwn-sand-pale, #E8DFC9) !important; background: #fff !important; } .modal .modal-body { overflow: visible !important; padding: 14px 16px !important; } .modal .modal-footer, .modal .modal-actions { position: sticky !important; bottom: 0 !important; z-index: 5 !important; margin: 0 !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid var(--trwn-sand-pale, #E8DFC9) !important; background: #fff !important; display: flex !important; gap: 8px !important; } /* ── GUEST MODAL — extras specific to the legacy 5-col-table markup */ #guest-modal [style*="overflow-x:auto"], #guest-modal [style*="overflow-x: auto"] { overflow-x: visible !important; width: 100% !important; } #guest-modal table { min-width: 0 !important; width: 100% !important; } #guest-modal .form-control, #guest-modal input, #guest-modal select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Hide Excel-import tab button + content on phones — manual entry only */ #guest-modal .tab-btn[data-tab="excel"], #guest-modal #tab-excel { display: none !important; } /* Single remaining tab — no tab strip needed */ #guest-modal .tab-buttons { display: none !important; } /* Hide page-head "Importeer" button (btn-ghost with data-modal-toggle="guest-modal"). "Nieuwe gast" uses btn-primary and stays visible. */ .page-head .actions .btn-ghost[data-modal-toggle="guest-modal"] { display: none !important; } /* ── BILLING (planner-side) — mobile readability ─────────────────── Most billing views render tables wrapped in
already, so they scroll horizontally. These rules tackle the remaining patterns: 3-column inline grids, fixed-width inputs, and wide form rows that overflow on phone width. */ [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:2fr 100px"], [style*="grid-template-columns: 2fr 100px"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:80px 1fr"], [style*="grid-template-columns:160px 1fr"], [style*="grid-template-columns:110px 80px 1fr"] { grid-template-columns: 1fr !important; } /* Cards with min-width force horizontal overflow on phones */ [style*="min-width:280px"], [style*="min-width: 280px"], [style*="min-width:260px"], [style*="min-width: 260px"], [style*="min-width:220px"], [style*="min-width: 220px"] { min-width: 0 !important; width: 100% !important; } /* Billing tables: ensure parent wrapper allows horizontal scroll */ .page table { font-size: 12px !important; } .page table th, .page table td { padding: 6px 8px !important; white-space: nowrap !important; } /* ── PAGE-HEAD ACTIONS DROPDOWN (seating + ceremony pages) ────────── main.js wraps the action buttons into .pa-wrap on phones. The individual buttons live inside .pa-menu and are revealed when .pa-open is added. .m-hidden hides items entirely (fullscreen). */ .page-head .actions .m-hidden { display: none !important; } .pa-wrap { position: relative !important; display: inline-block !important; } .pa-trigger { display: inline-flex !important; align-items: center !important; gap: 6px !important; } .pa-menu { display: none !important; position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; background: #fff !important; border: 1px solid var(--trwn-sand-pale, #E8DFC9) !important; border-radius: 12px !important; box-shadow: 0 12px 28px -8px rgba(45, 41, 38, 0.22) !important; z-index: 250 !important; min-width: 200px !important; padding: 6px !important; flex-direction: column !important; gap: 2px !important; } .pa-wrap.pa-open .pa-menu { display: flex !important; } .pa-menu > * { width: 100% !important; flex: none !important; justify-content: flex-start !important; text-align: left !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 14px !important; } .pa-menu > *:hover { background: var(--trwn-sand-pale, #E8DFC9) !important; } /* ── HERO CARD (overview / dashboard) — fit phone width ───────────── Desktop .hero has padding 42/48 and h1 68px which overflows on phones. Stack the grid vertically and shrink the names. */ .hero { padding: 20px 18px !important; margin-bottom: 14px !important; border-radius: 16px !important; } .hero-grid { grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important; } .hero h1 { font-size: 34px !important; line-height: 1.05 !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; margin: 4px 0 6px !important; gap: 8px !important; } .hero h1 .amp { font-size: 28px !important; line-height: 1 !important; } .hero-eyebrow { font-size: 9px !important; margin-bottom: 4px !important; } .hero-meta { font-size: 12px !important; gap: 8px !important; flex-wrap: wrap !important; } .hero-meta svg { width: 14px !important; height: 14px !important; } .hero-countdown { display: flex !important; align-items: baseline !important; gap: 8px !important; margin-top: 2px !important; } .hero-countdown .n { font-size: 40px !important; line-height: 1 !important; } .hero-countdown .l { font-size: 13px !important; } /* Hide the decorative rings SVG on phones — saves layout space and removes a 540px-wide absolutely positioned element from the flow. */ .hero-rings { display: none !important; } /* ── CANONICAL MODAL POSITIONING ─────────────────────────────────── CANONICAL modals live INSIDE a flex `.modal-overlay`; the overlay's flex-end alignment parks the sheet at the bottom, so these modals are positioned `relative` (the flex parent places them) rather than the `fixed` used by legacy sibling modals above. Everything else (sizing, gutters, sticky header/footer) is inherited from the `.modal` rules above so canonical and legacy modals look identical. This MUST stay scoped to `.modal-overlay .modal`: a bare `.modal` position:relative rule would also hit legacy modals (siblings of their backdrop), dropping them into normal page flow off-screen. */ .modal-overlay { align-items: flex-end !important; /* Side gutter + lift above the bottom tab-bar; matches the legacy sheet's gutters so canonical and legacy modals look identical. */ padding: 0 10px calc(64px + env(safe-area-inset-bottom, 0px)) !important; } .modal-overlay .modal, .modal-overlay .modal.modal-sm, .modal-overlay .modal.modal-md, .modal-overlay .modal.modal-lg, .modal-overlay .modal.modal-xl { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: 460px !important; margin: 0 auto !important; border-radius: 18px !important; max-height: 82dvh !important; transform: translateY(0) !important; animation: sheetSlideUp 0.28s cubic-bezier(.2, .8, .2, 1) !important; } /* ── RSVP cards — collapsible (tap header to reveal details/actions) ── Mirrors the tafelindeling tap-to-expand pattern. Collapsed shows only the head row (name + status + party size); body is revealed on tap. */ .rsvp-card-head { cursor: pointer; } .rsvp-chev { display: block !important; color: var(--trwn-warm-gray, #8a7f6d); transition: transform 0.2s ease; } .rsvp-card.is-open .rsvp-chev { transform: rotate(180deg); } .rsvp-card-body { display: none !important; } .rsvp-card.is-open .rsvp-card-body { display: block !important; } /* "Toon opstelling" button above the mobile seating/ceremony list. */ .m-opstelling-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--trwn-sand, #C9B79C); border-radius: 12px; background: #fff; color: var(--trwn-charcoal, #33312e); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } .m-opstelling-btn svg { flex-shrink: 0; } @keyframes sheetSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .modal { animation: none !important; } } }