/* * pwa-responsive.css — universal scaling overrides for the PWA shell. * * Loaded AFTER style.css so we can safely override the Flutter-shared rules * without touching that file. Targets: * - true edge-to-edge: paint html + body so the safe-area zones around * #app match the active theme (no more white/black sidebars on tablet * or status-bar gap on phone). * - tablet & big-screen: let #app grow past the 1000px cap on wide * viewports so dashboards and forms aren't a phone column in the middle * of a 12" iPad. * - foldable: treat wide aspect ratios (≥600px + 4/3..21/9) as landscape * tablet so the dashboard tile grid expands. * - landscape phones: ensure the existing 500px-max-height rules don't * conflict with the new tablet rules. * - dynamic viewport: stick to 100dvh so iOS/Chrome address-bar collapse * doesn't bounce the layout. * * Theme variables already declared by style.css: * --bg-primary, --bg-texture, --text-primary */ /* ===== 1. PAINT EVERYWHERE — fixes the side-bars on wide screens ====== */ /* html keeps the full marble texture so wide-screen layouts (tablet, foldable) don't show side bars. The edge-blending illusion at the very top/bottom (where the system bar meets the marble) is done by gradient overlays in §9d6 — NOT by stripping the marble. */ html { background: var(--bg-primary, #000) !important; background-image: var(--bg-texture, none) !important; background-size: cover !important; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; min-height: 100dvh; overscroll-behavior: none; } body { background: transparent !important; min-height: 100dvh; } /* ===== 2. LET #app BREATHE ON LARGE SCREENS ============================ */ /* Default style.css caps #app at 1000px. Above the tablet breakpoint we widen it. The viewport-level html bg already fills the area outside #app on wide screens, so this is purely about the content surface. */ @media (min-width: 768px) { #app { max-width: min(96vw, 1280px) !important; } } @media (min-width: 1280px) { #app { max-width: 1400px !important; } } /* ===== 3. EDGE-TO-EDGE SAFE AREAS ====================================== */ /* Standalone PWA on iOS / Android: extend content under the status bar while keeping interactive elements inside the safe area. */ @supports (padding: max(0px)) { #app { padding-left: max(env(safe-area-inset-left, 0px), 0px); padding-right: max(env(safe-area-inset-right, 0px), 0px); } } /* ===== 4. TABLET DASHBOARD — 3-up tile grid ============================ */ /* Original CSS jumps to 4 columns at 700px which is too aggressive on foldable phones / small tablets. Use a tiered approach. */ @media (min-width: 720px) and (orientation: portrait) { .tile-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 900px; gap: 14px; } } @media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, 1fr) !important; max-width: 1100px; gap: 16px; } } /* ===== 5. FOLDABLE / WIDE PHONE — landscape tablet form factor ========= */ /* A device with width ≥ 600px AND aspect ratio between 4:3 and 21:9 is a foldable opened or a tablet landscape. Use a comfortable form layout. */ @media (min-width: 600px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 21/9) { .tile-grid { grid-template-columns: repeat(4, 1fr) !important; max-width: 100%; } .header-bg { padding-top: max(env(safe-area-inset-top, 0px), 14px); padding-bottom: 10px; } .logo-img { max-width: 320px; width: 50%; } } /* ===== 6. TALL TABLETS (portrait iPad, Galaxy Tab portrait) ============ */ @media (min-width: 700px) and (min-height: 900px) and (orientation: portrait) { .logo-img { max-width: 480px; } .welcome-title { font-size: 1.5rem; } /* Generous tap targets on tablets — the dashboard tiles default to small */ .tile { min-height: 180px; } .btn-submit { padding: 14px 24px; font-size: 1rem; } } /* ===== 7. LANDSCAPE PHONES — tighten existing rules ==================== */ /* Original CSS handles (orientation: landscape) AND (max-height: 500px). We add a defensive rule for landscape with slightly more height (a foldable in landscape can hit 540-580px), so the dashboard still collapses gracefully. */ @media (orientation: landscape) and (max-height: 600px) and (max-width: 900px) { .logo-img { max-width: 180px; width: 35%; margin-top: 4px; } .header-bg { padding: max(env(safe-area-inset-top, 0px), 4px) 12px 4px; } /* Keep dashboard tiles in 2 columns but make them shorter and side-by-side */ .tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; } .tile { min-height: 80px; } } /* ===== 8. EDGE-TO-EDGE STANDALONE MODE — extra polish ================== */ @media all and (display-mode: standalone) { html, body { background-color: var(--bg-primary, #000) !important; } /* When installed, drop the box-shadow halo around #app (which only makes sense in a browser tab). */ #app { box-shadow: none !important; } } @media all and (display-mode: fullscreen) { html, body { background-color: var(--bg-primary, #000) !important; } #app { box-shadow: none !important; } } /* ===== 9a. WEBP MARBLE/WOOD OVERRIDES ================================== */ /* style.css declares each theme's --bg-texture with url('*.png'). We override here with the same selectors so the .webp companion ships instead. Identical selectors → later stylesheet wins on cascade. The .png originals were deleted from pwa/ when the WebP batch ran. */ :root { --bg-texture: url('white_marble.webp'); } [data-theme="dark"], [data-theme="dark"] body { --bg-texture: url('black_marble.webp'); } [data-theme-style="mahogany"] { --bg-texture: linear-gradient(rgba(255,248,235,0.10), rgba(255,248,235,0.10)), url('mahogany_private_day.webp'); } [data-theme="dark"][data-theme-style="mahogany"], [data-theme="dark"][data-theme-style="mahogany"] body { --bg-texture: linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)), url('mahogany_private_night.webp'); } [data-theme-style="indigo"] { --bg-texture: linear-gradient(rgba(240,244,255,0.06), rgba(240,244,255,0.06)), url('indigo_royal_day.webp'); } [data-theme="dark"][data-theme-style="indigo"], [data-theme="dark"][data-theme-style="indigo"] body { --bg-texture: linear-gradient(rgba(10,14,26,0.38), rgba(10,14,26,0.38)), url('indigo_royal_night.webp'); } [data-theme-style="zen"] { --bg-texture: linear-gradient(rgba(244,249,244,0.03), rgba(244,249,244,0.03)), url('zen_bamboo_day.webp'); } [data-theme="dark"][data-theme-style="zen"], [data-theme="dark"][data-theme-style="zen"] body { --bg-texture: linear-gradient(rgba(11,22,15,0.08), rgba(11,22,15,0.08)), url('zen_bamboo_night.webp'); } [data-theme-style="rose"] { --bg-texture: linear-gradient(rgba(255,245,245,0.03), rgba(255,245,245,0.03)), url('rose_copper_day.webp'); } [data-theme="dark"][data-theme-style="rose"], [data-theme="dark"][data-theme-style="rose"] body { --bg-texture: linear-gradient(rgba(28,15,14,0.08), rgba(28,15,14,0.08)), url('rose_copper_night.webp'); } [data-theme-style="diamond"] { --bg-texture: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), url('diamond_matte_day.webp'); } [data-theme="dark"][data-theme-style="diamond"], [data-theme="dark"][data-theme-style="diamond"] body { --bg-texture: linear-gradient(rgba(16,42,67,0.42), rgba(16,42,67,0.42)), url('diamond_matte_night.webp'); } html[data-theme-style="indigo"], html[data-theme-style="indigo"] body, html[data-theme-style="indigo"] #app, html[data-theme-style="indigo"] #screen-home, html[data-theme-style="indigo"] #screen-tablet-home, html[data-theme-style="indigo"] #screen-fold-home { background-image: linear-gradient(rgba(240,244,255,0.06), rgba(240,244,255,0.06)), url('indigo_royal_day.webp') !important; } html[data-theme="dark"][data-theme-style="indigo"], html[data-theme="dark"][data-theme-style="indigo"] body, html[data-theme="dark"][data-theme-style="indigo"] #app, html[data-theme="dark"][data-theme-style="indigo"] #screen-home, html[data-theme="dark"][data-theme-style="indigo"] #screen-tablet-home, html[data-theme="dark"][data-theme-style="indigo"] #screen-fold-home { background-image: linear-gradient(rgba(10,14,26,0.38), rgba(10,14,26,0.38)), url('indigo_royal_night.webp') !important; } html[data-theme-style="diamond"], html[data-theme-style="diamond"] body, html[data-theme-style="diamond"] #app, html[data-theme-style="diamond"] #screen-home, html[data-theme-style="diamond"] #screen-tablet-home, html[data-theme-style="diamond"] #screen-fold-home { background-image: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), url('diamond_matte_day.webp') !important; } html[data-theme="dark"][data-theme-style="diamond"], html[data-theme="dark"][data-theme-style="diamond"] body, html[data-theme="dark"][data-theme-style="diamond"] #app, html[data-theme="dark"][data-theme-style="diamond"] #screen-home, html[data-theme="dark"][data-theme-style="diamond"] #screen-tablet-home, html[data-theme="dark"][data-theme-style="diamond"] #screen-fold-home { background-image: linear-gradient(rgba(16,42,67,0.42), rgba(16,42,67,0.42)), url('diamond_matte_night.webp') !important; } [data-theme-style="luxury_marble"] { --bg-primary: #F8FAF8; --bg-texture: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), url('luxury_marble_a_day.webp'); } [data-theme="dark"][data-theme-style="luxury_marble"], [data-theme="dark"][data-theme-style="luxury_marble"] body { --bg-primary: #07100C; --bg-texture: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.06)), url('luxury_marble_a_dark.webp'); } /* iPad/tablet gets higher-resolution marble replicas so the background does not smear on wide Retina screens. Phones and foldables keep the smaller assets to avoid wasting memory. */ body[data-layout="tablet"] { --bg-texture: url('white_marble_ipad.webp'); } [data-theme="dark"] body[data-layout="tablet"] { --bg-texture: url('black_marble_ipad.webp'); } [data-theme-style="mahogany"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(255,248,235,0.10), rgba(255,248,235,0.10)), url('mahogany_private_day.webp'); } [data-theme="dark"][data-theme-style="mahogany"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)), url('mahogany_private_night.webp'); } [data-theme-style="indigo"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(240,244,255,0.06), rgba(240,244,255,0.06)), url('indigo_royal_day.webp'); } [data-theme="dark"][data-theme-style="indigo"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(10,14,26,0.38), rgba(10,14,26,0.38)), url('indigo_royal_night.webp'); } [data-theme-style="zen"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(244,249,244,0.03), rgba(244,249,244,0.03)), url('zen_bamboo_day.webp'); } [data-theme="dark"][data-theme-style="zen"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(11,22,15,0.08), rgba(11,22,15,0.08)), url('zen_bamboo_night.webp'); } [data-theme-style="rose"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(255,245,245,0.03), rgba(255,245,245,0.03)), url('rose_copper_day.webp'); } [data-theme="dark"][data-theme-style="rose"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(28,15,14,0.08), rgba(28,15,14,0.08)), url('rose_copper_night.webp'); } [data-theme-style="diamond"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), url('diamond_matte_day.webp'); } [data-theme="dark"][data-theme-style="diamond"] body[data-layout="tablet"] { --bg-texture: linear-gradient(rgba(16,42,67,0.42), rgba(16,42,67,0.42)), url('diamond_matte_night.webp'); } [data-theme-style="luxury_marble"] body[data-layout="tablet"] { --bg-primary: #F8FAF8; --bg-texture: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), url('luxury_marble_a_day.webp'); } [data-theme="dark"][data-theme-style="luxury_marble"] body[data-layout="tablet"] { --bg-primary: #07100C; --bg-texture: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.06)), url('luxury_marble_a_dark.webp'); } /* ===== 9b. MAP PICKER — dark-mode tile filter ========================== */ /* When the app is in dark theme, invert the (light) Google road tiles so the map matches. Satellite tiles bypass this via the `.hybrid-on` modifier set by the JS layer toggle — inverting satellite imagery looks terrible. */ html[data-theme="dark"] #web-map-picker-overlay:not(.hybrid-on) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.85); } /* ===== 9c. INSTALL GATES — desktop & mobile-not-installed screens ====== */ .install-gate { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top, 0px), 16px) 20px max(env(safe-area-inset-bottom, 0px), 16px); box-sizing: border-box; width: 100%; background: transparent !important; } .install-gate-card { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--text-accent, #E8CA80); border-radius: 18px; padding: 32px 28px; max-width: 460px; width: 100%; text-align: center; color: var(--text-primary, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } .install-gate-logo { width: 80%; max-width: 280px; height: auto; display: block; margin: 0 auto 18px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); } .install-gate-card h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--text-accent, #E8CA80); margin: 0 0 12px; letter-spacing: 0.2px; } .install-gate-card p { font-size: 0.95rem; line-height: 1.5; color: var(--text-primary, #f4f4f4); margin: 0 0 22px; opacity: 0.92; } .install-gate-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .install-gate-actions .btn-submit { width: 100%; margin: 0; padding: 14px 20px; font-size: 1rem; font-weight: 700; } .install-gate-actions .btn-submit:disabled { opacity: 0.55; cursor: not-allowed; } .install-gate-actions .btn-pill-small { width: fit-content; align-self: center; } .ios-install-steps { text-align: left; margin: -6px auto 18px; padding-left: 1.25rem; max-width: 360px; color: var(--text-primary, #f4f4f4); font-size: 0.92rem; line-height: 1.45; opacity: 0.94; } .ios-install-steps li { margin-bottom: 6px; } .install-help-pulse { animation: installHelpPulse 0.85s ease-out; } @keyframes installHelpPulse { 0% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.02); filter: brightness(1.25); } 100% { transform: scale(1); filter: brightness(1); } } .install-gate-meta { font-size: 0.72rem; color: var(--text-accent, #E8CA80); opacity: 0.65; margin-top: 4px; letter-spacing: 0.5px; } /* ===== 9d. MODAL OVERLAY — translucent + blurred backdrop ============== */ /* style.css hardcodes `.modal-overlay` to `background:#000` with `backdrop-filter: none !important;` (intentional for the Flutter native shell where SurfaceFlinger handles the blur). On web we want a real frosted-glass look — heavy blur over a translucent dark tint so the marble shows through softly behind the Settings + Generate Report modals. Override with matching specificity + !important to beat the original rule. */ .modal-overlay { background: rgba(0, 0, 0, 0.42) !important; backdrop-filter: blur(22px) saturate(140%) !important; -webkit-backdrop-filter: blur(22px) saturate(140%) !important; } #selection-modal.select-overlay { background: rgba(0, 0, 0, 0.18) !important; backdrop-filter: blur(8px) saturate(120%) !important; -webkit-backdrop-filter: blur(8px) saturate(120%) !important; align-items: flex-end; } #selection-modal.select-overlay .modal-content { border-radius: 18px 18px 0 0; border-top: 1px solid var(--tile-border); box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.32); } /* Confirm and prompt modals follow the same convention. */ .confirm-overlay, .prompt-overlay { background: rgba(0, 0, 0, 0.42) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; } /* ===== 9d2. GATE HEADER (theme + lang on install gates only) =========== */ /* Language toggle appears on the install/desktop gates, NOT on the dashboard (per user preference). The gate header floats top-right inside the gate viewport, with theme on the left of the pair and lang on the right so the active flag is the last visible icon. */ .install-gate-header { position: absolute; top: max(env(safe-area-inset-top, 0px), 14px); right: max(env(safe-area-inset-right, 0px), 14px); display: flex; flex-direction: row; gap: 8px; z-index: 5; } .install-gate-header .header-icon-btn { position: static !important; top: auto !important; right: auto !important; left: auto !important; } .lang-icon-flag { width: 22px !important; height: 22px !important; max-width: 22px; max-height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,0.25); pointer-events: none; display: block; } /* Force the button containers to clip overflow so a misbehaving img can't spill out across the dashboard if anything ever goes wrong with the size. */ .header-icon-btn { overflow: hidden; } /* ===== 9d3. SETTINGS PANEL — feedback + beer buttons (side-by-side) === */ .settings-extras { display: flex; flex-direction: row; gap: 8px; margin: 10px 0 4px; align-items: stretch; } .settings-extras .btn-pill-small { flex: 1 1 0; min-width: 0; display: flex !important; align-items: center; justify-content: center; gap: 6px; text-decoration: none; padding: 8px 8px; font-size: 0.78rem; white-space: normal; /* allow multi-line text */ overflow: hidden; line-height: 1.1; min-height: 40px; /* keep button height stable across 1- and 2-line labels */ } .settings-extras .btn-pill-small svg { flex-shrink: 0; } /* Store builds (Android/iOS) strip the donation link, leaving Feedback alone in the row — where flex:1 stretched it edge-to-edge. Centre it as a pill instead. Scoped via :only-child so the PWA (two buttons) is untouched. */ .settings-extras .btn-pill-small:only-child { flex: 0 1 auto; min-width: 60%; margin-left: auto; margin-right: auto; } .settings-extras .btn-pill-small.beer { background: rgba(255, 196, 0, 0.12); border-color: #E8B53A; color: #E8B53A; } /* ===== 9d5. GHOST CAMERA BADGE FIX ===================================== */ /* style.css line 1094 declares .villa-preview-wrap with no positioning context. The camera badge inside it uses position:absolute and escapes to the next positioned ancestor — landing in the viewport's bottom-right corner instead of inside the 65×65 villa thumbnail. Add the missing `position: relative` so the badge stays inside the thumb. */ .villa-preview-wrap { position: relative !important; } /* ===== 9d4. FOLDABLE / UNFOLDED LAYOUT ================================= Driven by body[data-layout] which app.js sets via _bvcDetectLayout(). Five discrete states instead of trying to do everything with viewport media queries: phone-portrait — default, no override here (style.css handles) phone-landscape — compact row of tiles fold-portrait — unfolded foldable, near-square upright fold-landscape — unfolded foldable, wide tablet — large tablet (iPad / Tab S etc) Each state gets a dedicated grid template so unfolded states no longer inherit the phone CSS that was overflowing on the Z Fold inner display. */ /* ---- Phone landscape: 4-across tile row, super-compact ---- */ body[data-layout="phone-landscape"] .header-bg { padding: max(env(safe-area-inset-top, 0px), 4px) 12px 4px !important; } body[data-layout="phone-landscape"] .logo-img { max-width: 140px !important; width: 28% !important; margin-top: 2px !important; } body[data-layout="phone-landscape"] .welcome-section { padding: 4px 14px !important; } body[data-layout="phone-landscape"] .welcome-title { font-size: 1.05rem !important; margin: 0 !important; } body[data-layout="phone-landscape"] .welcome-subtitle { font-size: 0.78rem !important; } body[data-layout="phone-landscape"] .tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; } body[data-layout="phone-landscape"] .tile { min-height: 70px !important; } body[data-layout="phone-landscape"] .tile-label { font-size: 0.75rem !important; } /* ---- Unfolded portrait foldable: 2×2 tile grid centred, generous gaps, action buttons full-width at bottom. ---- */ body[data-layout="fold-portrait"] #app { max-width: none !important; } body[data-layout="fold-portrait"] #screen-home { display: flex !important; flex-direction: column; padding: 0 max(env(safe-area-inset-right, 0px), 24px) max(env(safe-area-inset-bottom, 0px), 18px) max(env(safe-area-inset-left, 0px), 24px); gap: 14px; overflow-y: auto !important; } body[data-layout="fold-portrait"] .header-bg { padding: max(env(safe-area-inset-top, 0px), 16px) 0 4px !important; } body[data-layout="fold-portrait"] .logo-img { max-width: 360px !important; width: 45% !important; margin: 0 auto 4px !important; } body[data-layout="fold-portrait"] .welcome-section { max-width: 720px; margin: 0 auto; padding: 6px 0 !important; } body[data-layout="fold-portrait"] .center-grid { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } body[data-layout="fold-portrait"] .tile-grid { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(2, auto); max-width: 760px !important; width: 100%; margin: 0 auto; gap: 18px !important; } body[data-layout="fold-portrait"] .tile { min-height: clamp(170px, 23svh, 220px) !important; } body[data-layout="fold-portrait"] .tile, body[data-layout="fold-landscape"] .tile { height: clamp(118px, 15svh, 180px) !important; min-height: 118px !important; max-height: none !important; aspect-ratio: auto !important; } body[data-layout="fold-portrait"] .tile-label { font-size: 1.15rem; } body[data-layout="fold-portrait"] .action-buttons, body[data-layout="fold-portrait"] .bottom-actions, body[data-layout="fold-portrait"] .home-action-buttons { max-width: 720px; margin: 0 auto; width: 100%; } /* ---- Unfolded landscape foldable: keep the phone dashboard structure, but widen it into a stable 2×2 grid. The older split layout was brittle on real foldables with browser chrome / navigation bars visible. ---- */ body[data-layout="fold-landscape"] #app { max-width: none !important; } body[data-layout="fold-landscape"] #screen-home { display: flex !important; flex-direction: column; gap: 10px; padding: max(env(safe-area-inset-top, 0px), 10px) max(env(safe-area-inset-right, 0px), 18px) max(env(safe-area-inset-bottom, 0px), 12px) max(env(safe-area-inset-left, 0px), 18px); overflow-y: auto !important; } body[data-layout="fold-landscape"] .header-bg { padding: 4px 0 4px !important; } body[data-layout="fold-landscape"] .logo-img { max-width: 220px !important; width: min(34vw, 220px) !important; margin: 0 auto !important; } body[data-layout="fold-landscape"] .welcome-section { max-width: 720px; width: 100%; margin: 0 auto; padding: 0 4px !important; } body[data-layout="fold-landscape"] .center-grid { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; } body[data-layout="fold-landscape"] .tile-grid { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(2, auto); width: 100%; max-width: 760px !important; gap: clamp(10px, 1.6vw, 14px) !important; } body[data-layout="fold-landscape"] .tile { min-height: clamp(112px, 19svh, 150px) !important; } body[data-layout="fold-landscape"] .tile-label { font-size: 0.98rem; } body[data-layout="fold-landscape"] .action-buttons, body[data-layout="fold-landscape"] .bottom-actions, body[data-layout="fold-landscape"] .home-action-buttons { max-width: 720px; margin: 0 auto; width: 100%; } @media (max-width: 900px) and (orientation: landscape) { body[data-layout="fold-landscape"] .logo-img { max-width: 190px !important; } body[data-layout="fold-landscape"] .welcome-title { font-size: 1.15rem !important; } body[data-layout="fold-landscape"] .welcome-subtitle { font-size: 0.82rem !important; } body[data-layout="fold-landscape"] .tile-label { font-size: 0.92rem; } } /* ---- Tablet (iPad / Tab S, single-screen large device): separate dashboard so the Android phone home screen keeps its existing behavior. ---- */ body[data-layout="tablet"] #app { max-width: none !important; } body[data-layout="tablet"] #screen-home { display: none !important; } body[data-layout="fold-portrait"] #app, body[data-layout="fold-landscape"] #app { max-width: none !important; } #screen-tablet-home { display: none; width: 100%; min-height: 100svh; height: 100svh; overflow: hidden; padding: max(env(safe-area-inset-top, 0px), 18px) max(env(safe-area-inset-right, 0px), clamp(24px, 4vw, 54px)) max(env(safe-area-inset-bottom, 0px), 20px) max(env(safe-area-inset-left, 0px), clamp(24px, 4vw, 54px)); background: var(--bg-primary, #000) !important; background-image: var(--bg-texture, none) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } body:not([data-layout="tablet"]) #screen-tablet-home { display: none !important; } #screen-fold-home { display: none; width: 100%; min-height: 100svh; height: 100svh; overflow: hidden; padding: max(env(safe-area-inset-top, 0px), 12px) max(env(safe-area-inset-right, 0px), clamp(14px, 3vw, 26px)) max(env(safe-area-inset-bottom, 0px), 12px) max(env(safe-area-inset-left, 0px), clamp(14px, 3vw, 26px)); background: var(--bg-primary, #000) !important; background-image: var(--bg-texture, none) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } body:not([data-layout="fold-portrait"]):not([data-layout="fold-landscape"]) #screen-fold-home { display: none !important; } body[data-layout="fold-portrait"] #screen-home, body[data-layout="fold-landscape"] #screen-home { display: none !important; } /* NO !important here. navigate() owns dashboard visibility via inline styles (app.js: hides all three home variants, then shows the right one as display:grid). With !important this rule beat that inline display:none, so unfolding a foldable re-opened #screen-fold-home on top of whatever screen the user was on — the villa-add form got clipped and it looked like the app jumped to the defect dashboard. The tablet rule has never used !important, which is exactly why tablets were unaffected. */ body[data-layout="fold-portrait"] #screen-fold-home, body[data-layout="fold-landscape"] #screen-fold-home { display: grid; } .fold-dashboard { width: min(100%, 900px); height: 100%; margin: 0 auto; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(9px, 1.4svh, 15px); min-height: 0; } .fold-hero { display: grid; grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1fr); align-items: center; gap: clamp(12px, 2.4vw, 22px); min-height: 0; } .fold-logo-img { width: min(26vw, 190px); height: auto; justify-self: center; display: block; filter: var(--header-filter); } .fold-summary { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .fold-title { font-size: clamp(1.18rem, 3vw, 1.65rem) !important; line-height: 1.08 !important; margin: 0 !important; } .fold-subtitle { font-size: clamp(0.78rem, 1.85vw, 0.94rem) !important; line-height: 1.25 !important; margin: 0 !important; } .fold-home-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .fold-home-buttons .btn-pill-small { max-width: none; min-height: 34px; margin: 0; padding: 6px 13px; font-size: 0.82rem; white-space: nowrap; } .fold-progress { width: min(100%, 560px); height: 32px; margin: 0 auto; } .fold-area-grid { min-height: 0; align-self: stretch; justify-self: center; width: min(100%, 760px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 14px); } .fold-area-tile { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(232, 202, 128, 0.45); border-radius: 8px; background: rgba(0, 0, 0, 0.35); box-shadow: 0 10px 22px rgba(0,0,0,0.34); color: var(--text-primary); cursor: pointer; padding: 0; } .fold-area-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--tile-img-filter, none) contrast(1.05); transform: scale(1.04); } .fold-area-tile::after { content: ''; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(0,0,0,0.74), rgba(0,0,0,0)); } .fold-area-tile span { position: relative; z-index: 1; width: 100%; padding: 10px 12px; color: #fff; font-family: 'Outfit', sans-serif; font-size: clamp(0.82rem, 2.25vw, 1.05rem); font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0; text-shadow: 0 2px 5px rgba(0,0,0,0.75); } .fold-bottom-actions { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(270px, 1.2fr); gap: 10px; align-items: stretch; } .fold-bottom-actions .btn-submit, .fold-bottom-actions .btn-action-block { margin: 0; min-height: 46px; font-size: clamp(0.78rem, 2vw, 0.95rem); } .fold-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tablet-dashboard { width: min(100%, 1220px); height: 100%; margin: 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(14px, 2.1svh, 24px); } .tablet-hero { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr); align-items: center; gap: clamp(20px, 4vw, 48px); min-height: 0; } .tablet-logo-panel { display: flex; align-items: center; justify-content: center; min-width: 0; } .tablet-logo-img { width: min(100%, 360px); height: auto; display: block; filter: var(--header-filter); } .tablet-summary { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .tablet-title { font-size: clamp(1.55rem, 2.3vw, 2.25rem) !important; margin: 0 !important; } .tablet-subtitle { font-size: clamp(0.92rem, 1.35vw, 1.08rem) !important; line-height: 1.35 !important; margin: 0 !important; } .tablet-home-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; } .tablet-home-buttons .btn-pill-small { max-width: none; margin: 0; min-height: 42px; padding: 8px 18px; } .tablet-progress { max-width: 560px; height: 38px; margin: 6px 0 0; } .tablet-area-grid { min-height: 0; width: min(85%, 1040px); justify-self: center; align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.1vw, 24px); } .tablet-area-tile { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(232, 202, 128, 0.45); border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: 0 12px 28px rgba(0,0,0,0.35); color: var(--text-primary); cursor: pointer; padding: 0; } .tablet-area-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--tile-img-filter, none) contrast(1.05); transform: scale(1.04); } .tablet-area-tile::after { content: ''; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0)); } .tablet-area-tile span { position: relative; z-index: 1; width: 100%; padding: 16px 18px; color: #fff; font-family: 'Outfit', sans-serif; font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0; text-shadow: 0 2px 5px rgba(0,0,0,0.75); } .tablet-bottom-actions { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr); gap: clamp(14px, 2vw, 22px); align-items: stretch; } .tablet-bottom-actions .btn-submit, .tablet-bottom-actions .btn-action-block { margin: 0; min-height: 58px; } .tablet-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (orientation: portrait) { body[data-layout="tablet"] #screen-tablet-home { overflow-y: auto; } .tablet-dashboard { min-height: 100%; height: auto; grid-template-rows: auto auto auto; } .tablet-hero { grid-template-columns: 1fr; gap: 10px; text-align: center; } .tablet-logo-img { width: min(60vw, 360px); } .tablet-summary { align-items: center; } .tablet-area-grid { min-height: min(50svh, 580px); } .tablet-bottom-actions { grid-template-columns: 1fr; } } @media (orientation: landscape) { .tablet-area-grid { min-height: 0; height: min(44svh, 440px); } .tablet-logo-img { width: min(26vw, 330px); } } html.ios-device, html.ios-device body { width: 100%; min-height: 100svh; background-color: var(--bg-primary, #000) !important; background-image: var(--bg-texture, none) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } html.ios-device::before { content: ''; position: fixed; inset: 0; background-color: var(--bg-primary, #000); background-image: var(--bg-texture, none); background-size: cover; background-position: center center; background-repeat: no-repeat; pointer-events: none; z-index: 0; } html.ios-device body::before { content: '' !important; display: block !important; position: fixed; inset: 0; background-color: var(--bg-primary, #000); background-image: var(--bg-texture, none); background-size: cover; background-position: center center; background-repeat: no-repeat; pointer-events: none; z-index: 0; } html.ios-device body, html.ios-device #app { position: relative; z-index: 1; } html.ios-device #app { width: 100vw !important; max-width: none !important; min-height: 100svh !important; height: auto !important; margin: 0 !important; box-shadow: none !important; overflow-x: hidden; } html.ios-device #screen-home .bottom-actions, html.ios-device #screen-home .action-grid-2, html.ios-device #screen-home .btn-submit, html.ios-device #screen-home .btn-action-block { position: relative; z-index: 60; } #modal-title, #selected-lang-text, #selected-theme-text, #report-pdf-theme-text, #report-xlsx-theme-text { color: var(--text-accent) !important; } #modal-title { font-family: 'Playfair Display', serif; font-weight: 700; } @media (orientation: portrait) and (max-width: 520px) { html.ios-device, html.ios-device body { min-height: 100dvh !important; min-height: 100lvh !important; } html.ios-device #app { min-height: 100dvh !important; min-height: 100lvh !important; height: 100lvh !important; overflow: hidden !important; } html.ios-device #screen-home { min-height: 100dvh !important; min-height: 100lvh !important; height: 100lvh !important; overflow-y: visible !important; padding-bottom: max(env(safe-area-inset-bottom, 0px), 14px) !important; } html.ios-device #screen-home .header-bg { padding-top: max(env(safe-area-inset-top, 0px), 8px) !important; padding-bottom: 0 !important; flex: 0 0 auto !important; } html.ios-device #screen-home .logo-img { width: min(66vw, 320px) !important; max-height: 20dvh !important; margin: 0 auto !important; } html.ios-device #screen-home .welcome-section { padding: 0 22px 4px !important; gap: 4px !important; flex: 0 0 auto !important; } html.ios-device #screen-home .welcome-title { font-size: clamp(1.35rem, 7vw, 2rem) !important; line-height: 1.06 !important; } html.ios-device #screen-home .welcome-subtitle { font-size: clamp(0.74rem, 3.4vw, 0.95rem) !important; line-height: 1.15 !important; } html.ios-device #screen-home .center-grid { flex: 1 1 auto !important; justify-content: center !important; padding: 20px 22px 6px !important; overflow: visible !important; min-height: 0 !important; } html.ios-device #screen-home .tile-grid { gap: 8px !important; max-width: 100% !important; } html.ios-device #screen-home .tile { aspect-ratio: 1.34 / 1 !important; min-height: 0 !important; max-height: none !important; } html.ios-device #screen-home .tile-label { font-size: clamp(0.84rem, 4vw, 1.05rem) !important; line-height: 1.08 !important; } html.ios-device #screen-home .bottom-actions { flex: 0 0 auto !important; position: relative !important; z-index: 60 !important; padding: 6px 22px max(env(safe-area-inset-bottom, 0px), 8px) !important; margin-top: 0 !important; transform: translateY(14px); } html.ios-device #screen-home .btn-submit { padding: 10px !important; margin-bottom: 8px !important; font-size: 1.05rem !important; } html.ios-device #screen-home .btn-action-block { min-height: 46px !important; padding: 9px 10px !important; } } /* ===== 9d6. EDGE-TO-EDGE SMOOTHING — soft gradient where bars meet marble Per user direction: KEEP the full marble texture, just blur the seam where the OS system bar (top) and gesture pill (bottom) meet the marble veins. Two thin gradient overlays via ::before/::after — each fades from theme-color (matching the bar) at the very edge to fully transparent ~30-40px in. The veins underneath stay 100% intact; the eye reads it as marble softly bleeding into the bar. pointer-events:none keeps them click-through. */ #app { position: relative; } #app::before, #app::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; } #app::before { /* Top edge — fades from system-bar-colour to transparent over 36px */ top: 0; height: 36px; background: linear-gradient( to bottom, var(--bg-primary, #000) 0%, rgba(0, 0, 0, 0) 100% ); } #app::after { /* Bottom edge — same idea, slightly taller for the gesture-pill zone */ bottom: 0; height: 44px; background: linear-gradient( to top, var(--bg-primary, #000) 0%, rgba(0, 0, 0, 0) 100% ); } html.ios-device #app::before, html.ios-device #app::after { content: none !important; display: none !important; } html.ios-device[data-theme="light"] #app::before, html.ios-device[data-theme="light"] #app::after, html.ios-device.theme-light #app::before, html.ios-device.theme-light #app::after { content: none !important; display: none !important; background: transparent !important; } html[data-theme="light"] #app::before, html[data-theme="light"] #app::after { content: none !important; display: none !important; background: transparent !important; } @supports (-webkit-touch-callout: none) { html[data-theme="light"] #app::before, html[data-theme="light"] #app::after { content: none !important; display: none !important; background: transparent !important; } } /* Phone landscape: bars are on the sides, not top/bottom — skip the smoothing. */ @media (orientation: landscape) and (max-height: 600px) { #app::before, #app::after { display: none; } } html.ios-dynamic-island .toast-container { top: max(calc(env(safe-area-inset-top, 0px) + 5px), 14px); width: min(68vw, 310px); } html.ios-dynamic-island .toast-bar { padding: 9px 14px; font-size: 0.78rem; line-height: 1.18; background: rgba(18, 22, 20, 0.94); border-color: rgba(232, 202, 128, 0.38); box-shadow: 0 8px 22px rgba(0,0,0,0.48); } /* ===== 9d7. SETTINGS PANEL CONDENSE — aggressively no-scroll on phones */ #settings-modal .modal-content { max-width: 400px; padding-bottom: 10px !important; } #settings-modal .modal-content > div[style*="padding: 20px"] { padding: 8px 14px !important; } #settings-modal .form-group { padding: 0 !important; margin-bottom: 8px !important; } #settings-modal .form-group label { font-size: 0.72rem !important; margin-bottom: 2px; display: block; } #settings-modal .form-control { padding: 8px 10px !important; min-height: 0 !important; font-size: 0.85rem; } #settings-modal hr { margin: 6px 0 !important; } #settings-modal .settings-section-title { font-size: 0.68rem !important; margin: 2px 0 4px !important; letter-spacing: 0.4px; } #settings-modal .btn-submit { padding: 9px 12px !important; font-size: 0.78rem !important; } #settings-modal .settings-extras { margin: 4px 0 !important; } #settings-modal .modal-content > div > div[style*="text-align:center"] { margin: 2px 0 0 !important; font-size: 0.66rem !important; } /* Trim the export buttons row too */ #settings-modal .btn-export, #settings-modal .btn-import { padding: 9px 5px !important; font-size: 0.75rem !important; } /* Tighter modal-header */ #settings-modal .modal-header { padding: 10px 14px 4px !important; } #settings-modal .modal-header h3 { font-size: 1rem !important; } /* "Feedback" label gets a tiny "& feature request" caption stacked below the main word, so the button stays narrow but tells you both purposes. */ .btn-feedback-stack { display: flex; flex-direction: column; align-items: center; line-height: 1.05; gap: 1px; text-align: center; min-width: 0; } .btn-feedback-stack .feedback-main { font-size: 0.82rem; font-weight: 700; white-space: nowrap; } .btn-feedback-stack .feedback-sub { font-size: 0.58rem; opacity: 0.78; font-weight: 500; letter-spacing: 0.2px; white-space: nowrap; } /* ===== 9d8. THEMED