/** * Capacitor / iOS WebView / Android WebView overrides. * Loaded on all customer pages; rules apply when has class "capacitor-app". */ html.capacitor-app, html.capacitor-app body { height: 100%; min-height: 100%; min-height: -webkit-fill-available; overscroll-behavior: none; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; } html.capacitor-app body.customer-app { min-height: 100dvh; min-height: -webkit-fill-available; } /* Status bar / notch — WKWebView edge-to-edge */ html.capacitor-app .app-header { padding-top: calc(0.75rem + env(safe-area-inset-top, 0)); } html.capacitor-app .app-main { padding-left: calc(1rem + env(safe-area-inset-left, 0)); padding-right: calc(1rem + env(safe-area-inset-right, 0)); padding-bottom: calc(1rem + var(--db-bottom-nav-height) + env(safe-area-inset-bottom, 0)); flex: 1; overflow-x: hidden; } html.capacitor-app .app-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); /* iOS fixed-position compositing */ transform: translateZ(0); -webkit-transform: translateZ(0); } /* Prevent iOS zoom on input focus (requires font-size >= 16px) */ html.capacitor-app input.form-control, html.capacitor-app select.form-select, html.capacitor-app textarea.form-control { font-size: 16px; } /* Login screen safe areas */ html.capacitor-app .login-page { min-height: 100dvh; min-height: -webkit-fill-available; padding-top: calc(2rem + env(safe-area-inset-top, 0)); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)); padding-left: calc(1rem + env(safe-area-inset-left, 0)); padding-right: calc(1rem + env(safe-area-inset-right, 0)); } /* Live TV — video hore, zoznam kanálov dole (TV app UX) */ html.capacitor-app .live-tv-layout { flex-direction: column-reverse; gap: 0.75rem; min-height: auto; } html.capacitor-app .channel-sidebar { width: 100%; flex: 0 0 auto; max-height: 38vh; border-radius: var(--db-radius); } html.capacitor-app .live-preview-header { flex-wrap: wrap; } html.capacitor-app .live-preview-clock { font-size: 1.15rem; } html.capacitor-app .live-preview-controls { flex-wrap: wrap; } html.capacitor-app .control-btn { min-width: calc(50% - 0.25rem); } /* Home grid — Capacitor / mobile */ html.capacitor-app .home-grid { display: flex; flex-wrap: wrap; max-width: none; width: 100%; gap: 0.75rem; justify-content: center; padding: 0; } html.capacitor-app .home-tile { flex: 0 0 calc(50% - 0.375rem); width: calc(50% - 0.375rem); min-height: 130px; max-width: none; } html.capacitor-app .home-hero { padding: 1.25rem 0 1rem; } html.capacitor-app .home-hero h1 { font-size: 1.25rem; } /* EPG timeline — fit mobile width */ html.capacitor-app .epg-timeline-container { max-height: calc(100dvh - 220px); } html.capacitor-app .epg-channel-info { width: 100px; font-size: 0.75rem; } html.capacitor-app .epg-hour { min-width: 100px; font-size: 0.7rem; } /* Profile / tables */ html.capacitor-app .table-responsive { -webkit-overflow-scrolling: touch; } html.capacitor-app .card { border-radius: var(--db-radius); } /* Watch page */ html.capacitor-app .video-container { border-radius: var(--db-radius-sm); } html.capacitor-app .content-refresh-banner { bottom: calc(var(--db-bottom-nav-height) + 0.75rem + env(safe-area-inset-bottom, 0)); max-width: calc(100vw - 2rem); white-space: normal; text-align: center; flex-direction: column; } /* Hide desktop-only header nav in app (bottom nav is primary) */ html.capacitor-app .app-header-nav { display: none !important; } /* Full-bleed video on watch/live pages */ html.capacitor-app .live-preview .video-container { border-radius: var(--db-radius-sm); } /* iPad in Capacitor — keep bottom nav, wider grid */ @media (min-width: 768px) { html.capacitor-app .app-bottom-nav { display: flex; } html.capacitor-app .app-main { padding-bottom: calc(1rem + var(--db-bottom-nav-height) + env(safe-area-inset-bottom, 0)); } html.capacitor-app .home-grid { max-width: 520px; margin: 0 auto; } html.capacitor-app .home-tile { flex: 0 0 calc(25% - 0.5625rem); width: calc(25% - 0.5625rem); min-height: 120px; } html.capacitor-app .live-tv-layout { flex-direction: row; } html.capacitor-app .channel-sidebar { width: 300px; flex: 0 0 300px; max-height: calc(100dvh - 180px); } }