/* Kattenberg118 Studio — mobile.css * * Universele mobiele overlay. Alle regels hieronder vallen binnen * @media (max-width: 768px) zodat desktop volledig onaangetast blijft. * * Best practices: * - 16px+ font-size op inputs (geen iOS auto-zoom) * - 44×44 px minimum touch targets (Apple HIG) * - safe-area-inset-* voor notch / home indicator * - sticky topbar + bottom tab bar (native iOS feel) * - tabellen → kaarten zodat horizontaal scrollen vermeden wordt * - modals → bottom sheets met grab handle * - smooth momentum scrolling * * Activeer een desktop-override door te zetten, * of door ?desktop=1 in de URL (zie bootstrap script onderaan dashboard). */ /* ───────────────────────────────────────────────────────────────────────────── * Globale tokens — beschikbaar in beide modes, gebruikt door mobile chrome. * ───────────────────────────────────────────────────────────────────────── */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --mob-topbar-h: 56px; --mob-bottom-h: 64px; --mob-tap: 44px; } /* iOS Safari overscroll polish */ html { -webkit-text-size-adjust: 100%; } /* ───────────────────────────────────────────────────────────────────────────── * Bottom-nav component — alleen zichtbaar onder 768px (zie media query lager). * ───────────────────────────────────────────────────────────────────────── */ .mob-bottom-nav { display: none; } .mob-fab { display: none; } .mob-sheet-handle { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ * MOBILE BREAKPOINT — alles hieronder geldt enkel op telefoon (≤ 768px). * Desktop blijft 1:1 zoals het was. * ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { html.force-desktop { /* opt-out: gebruik ?desktop=1 → JS zet deze klasse */ } html.force-desktop body { min-width: 1024px; } /* ── Globaal ─────────────────────────────────────────────────────────── */ html, body { overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; } body { padding-left: var(--safe-left); padding-right: var(--safe-right); /* iOS scroll fix: dashboard.html zet body op flex+100vh, wat content afknipt op iPhone Safari. Forceer dat body voorbij viewport mag groeien. */ min-height: 100dvh !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Voorkom iOS zoom op alle form fields */ input, select, textarea, button { font-size: 16px !important; } /* Specifiek voor zoekvelden / kleine velden binnen tabellen mag het 14px */ .mob-allow-small input, .mob-allow-small select { font-size: 14px !important; } /* Touch targets */ button, a.btn, .act-btn, .btn-new, .btn-logout, .btn-cancel, .btn-danger, .btn-copy, .nav-tab, [role="button"] { min-height: var(--mob-tap); } /* ── Topbar — compact, sticky, safe-area aware ──────────────────────── */ .topbar { height: calc(var(--mob-topbar-h) + var(--safe-top)) !important; padding: var(--safe-top) 12px 0 12px !important; gap: 8px !important; } .topbar-divider, .topbar-label { display: none !important; } .topbar-logo img { height: 32px !important; } .topbar-right { gap: 6px !important; } .user-chip { display: none !important; } /* avatar verhuist naar profiel-tab */ .topbar .btn-logout { padding: 8px 10px !important; font-size: 12px !important; min-height: 36px !important; } /* Verberg secundaire topbar links (Status etc.) — zit in bottom-nav ‘Meer’ */ .topbar a.btn-logout[href="/status.html"] { display: none !important; } /* ── Desktop nav-tabs verbergen, vervang door bottom-nav (zie onder) ── */ .nav-tabs { /* Desktop horizontale tabs verbergen op mobiel; we tonen bottom-nav */ display: none !important; } /* ── Content padding herzien ─────────────────────────────────────────── */ .content { padding: 16px 14px calc(var(--mob-bottom-h) + var(--safe-bottom) + 24px) !important; max-width: 100% !important; flex-shrink: 0 !important; /* iOS: voorkom dat flex:1 content tot viewport-hoogte krimpt */ } /* ── Section header op mobiel: stack ─────────────────────────────────── */ .section-header { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-bottom: 16px !important; } .section-title { font-size: 24px !important; line-height: 1.2 !important; } .section-meta { font-size: 13px !important; } .section-header .btn-new { width: 100% !important; justify-content: center !important; padding: 14px 18px !important; border-radius: 12px !important; font-size: 15px !important; } /* ── KPI grid ─────────────────────────────────────────────────────────── */ #kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .kpi-pill { padding: 10px 12px !important; border-radius: 12px !important; } /* ── Tables → cards ────────────────────────────────────────────────────── Strategie: zet table/thead/tbody/tr/td op block, verberg headers, en gebruik data-label="Kolomnaam" attributen voor labels. Werkt direct voor tabellen die data-label zetten; voor de bestaande dashboard-tabellen voegen we data-labels toe via JS (mobile-bootstrap). */ .table-card { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } .table-card table, .table-card thead, .table-card tbody, .table-card tr, .table-card th, .table-card td { display: block !important; width: 100% !important; } .table-card thead { display: none !important; } .table-card tbody tr { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 12px 14px !important; margin-bottom: 10px !important; box-shadow: var(--shadow-card) !important; } .table-card tbody tr:hover { background: var(--surface) !important; } .table-card tbody td { padding: 6px 0 !important; border: none !important; font-size: 14px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; text-align: right !important; } .table-card tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: left; flex: 0 0 auto; margin-right: 10px; } .table-card tbody td:not([data-label])::before { content: none; } .table-card tbody td.actions { flex-wrap: wrap !important; justify-content: flex-end !important; padding-top: 10px !important; margin-top: 8px !important; border-top: 1px dashed var(--border) !important; } .table-card tbody td.actions::before { display: none !important; } .table-card .act-btn { padding: 10px 14px !important; font-size: 13px !important; border-radius: 10px !important; } /* ── Modal → bottom sheet ────────────────────────────────────────────── */ .modal-overlay { align-items: flex-end !important; background: rgba(0,0,0,0.5) !important; } .modal { width: 100% !important; max-width: 100% !important; border-radius: 20px 20px 0 0 !important; padding: 16px 20px calc(24px + var(--safe-bottom)) 20px !important; max-height: 90vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; animation: mobSheetUp 0.25s cubic-bezier(.2,.8,.2,1); } @keyframes mobSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 14px auto; } .modal-actions { flex-direction: column-reverse !important; gap: 10px !important; } .modal-actions button, .modal-actions .btn-cancel, .modal-actions .btn-danger, .modal-actions .btn-copy { width: 100% !important; padding: 14px 20px !important; border-radius: 12px !important; font-size: 15px !important; } /* ── Toast op mobiel: bottom-center, boven bottom-nav ────────────────── */ .toast { left: 50% !important; right: auto !important; bottom: calc(var(--mob-bottom-h) + var(--safe-bottom) + 16px) !important; transform: translate(-50%, 80px) !important; max-width: calc(100vw - 32px) !important; width: max-content !important; } .toast.show { transform: translate(-50%, 0) !important; } /* ── Generieke editor pagina's: zorg dat sidebars onder content vallen ── */ .editor-grid, .layout-grid, .two-col, .split, .sidebar-layout { display: block !important; } aside, .sidebar, .right-rail, .left-rail { width: 100% !important; max-width: 100% !important; position: static !important; margin-top: 16px !important; } /* ── Bottom nav (iOS-style) ──────────────────────────────────────────── */ .mob-bottom-nav { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; height: calc(var(--mob-bottom-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--border); justify-content: space-around; align-items: stretch; } .mob-bottom-nav button { flex: 1; background: none; border: none; font-family: inherit; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; -webkit-tap-highlight-color: transparent; position: relative; min-height: var(--mob-tap); } .mob-bottom-nav button svg { width: 22px; height: 22px; } .mob-bottom-nav button.active { color: var(--text-strong); } .mob-bottom-nav button.active::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 2px; background: var(--yellow); } .mob-bottom-nav .badge-dot { position: absolute; top: 6px; right: calc(50% - 18px); background: var(--red); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; } /* ── Sheet "Meer" — extra acties op mobiel ───────────────────────────── */ .mob-more-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 250; display: none; align-items: flex-end; } .mob-more-sheet.show { display: flex; } .mob-more-sheet-inner { background: var(--surface); width: 100%; border-radius: 20px 20px 0 0; padding: 16px 20px calc(20px + var(--safe-bottom)) 20px; animation: mobSheetUp 0.25s cubic-bezier(.2,.8,.2,1); } .mob-more-sheet-inner::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 14px auto; } .mob-more-sheet-inner a, .mob-more-sheet-inner button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 12px; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 16px; text-decoration: none; text-align: left; cursor: pointer; } .mob-more-sheet-inner a:last-child, .mob-more-sheet-inner button:last-child { border-bottom: none; } .mob-more-sheet-inner svg { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.7; } /* ── Login screen mobile-first ─────────────────────────────────────────── Login pagina: body is een flex container (align/justify center) en centreert .login-wrap. We strippen de globale safe-area side padding hier omdat die in landscape (notch) asymmetrisch wordt en de centering verstoort — de safe-area ademruimte komt nu uit .login-wrap zelf. */ body.login-page { padding-left: 0 !important; padding-right: 0 !important; min-height: 100dvh !important; /* body is reeds flex (align/justify center) in login.html — we strippen enkel de globale safe-area side padding zodat landscape notch geen asymmetrische offset geeft. Safe-area komt nu uit .login-wrap. */ } body.login-page .login-wrap { padding-top: calc(var(--safe-top) + 24px) !important; padding-bottom: calc(var(--safe-bottom) + 24px) !important; padding-left: calc(var(--safe-left) + 20px) !important; padding-right: calc(var(--safe-right) + 20px) !important; margin-left: auto !important; margin-right: auto !important; } /* ── Bigger shapes op mobile ───────────────────────────────────────────── De browser-versie gebruikt cqw units (proportioneel met rij-breedte). Op een smal mobiel scherm wordt 11cqw maar ~40px terwijl op desktop dezelfde shape ~120px is. shapes.js detecteert mobile (≤768px) en vult dan px-based grootte in, zodat we hier geen CSS overrides nodig hebben (inline styles winnen anders altijd). Zie shapes.js. */ .bg-shapes .shape-row { height: 120px !important; } /* ── Editor toolbars: maak scrollable ────────────────────────────────── */ .toolbar, .editor-toolbar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; scrollbar-width: none; } .toolbar::-webkit-scrollbar, .editor-toolbar::-webkit-scrollbar { display: none; } /* ── Track / Approve klantpagina's: bredere, leesbare layout ──────────── */ .approve-card, .track-card, .public-card { margin: 16px !important; padding: 20px !important; border-radius: 16px !important; } /* ── Status pagina: stack de service cards ───────────────────────────── */ .status-grid, .services-grid { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ───────────────────────────────────────────────────────────────────────────── * Smal viewport polish (≤ 380px, iPhone SE) * ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 380px) { .section-title { font-size: 22px !important; } #kpi-grid { grid-template-columns: 1fr !important; } .mob-bottom-nav button { font-size: 9px; } } /* ───────────────────────────────────────────────────────────────────────────── * iOS standalone PWA polish (na "Voeg toe aan beginscherm") * ───────────────────────────────────────────────────────────────────────── */ @media (display-mode: standalone) { .topbar { /* extra ademruimte want geen Safari-balk */ } body { user-select: none; -webkit-user-select: none; } /* Inputs blijven selectable */ input, textarea { -webkit-user-select: auto; user-select: auto; } }