/* ========================================================================== ios-pwa.css — iOS standalone-PWA correctness layer (Varthagam ERP) -------------------------------------------------------------------------- ADDITIVE, low-risk global pass for the app added to the iOS Home Screen (runs standalone in WebKit). No feature redesign — only fixes notch/home- indicator overlap, the iOS 100vh toolbar bug, input zoom-on-focus, tap flash, momentum scroll, touch-target size, and rubber-band overscroll. GREEN theme (#3C7538) — never blue. Each block notes the elements it targets. iOS-only rules are gated behind @supports (-webkit-touch-callout: none) so Android/desktop are untouched. ========================================================================== */ /* ── 1. Global tap/callout hygiene (cheap, safe everywhere) ─────────────── Kill the grey tap-flash on every interactive surface, and disable the long-press text callout on UI chrome (nav, topbar, buttons). These are harmless on desktop (no touch) so they stay ungated. */ * { -webkit-tap-highlight-color: transparent; } .nav-item, .nav button, .topbar, .sidebar-toggle, button, .main-tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ── 2. Momentum scrolling on the app's scroll containers ───────────────── iOS WebKit needs this for inertial scroll inside fixed/overflow panes (sidebar nav, modals, drawers, the AI panel, file viewer). */ .sidebar, .main-area, .modal-backdrop, .modal, .side-drawer, .ai-panel, .file-viewer-modal, .search-modal-results, .jump-palette-overlay, .kbd-help-overlay { -webkit-overflow-scrolling: touch; } /* ── 3. Overscroll containment ──────────────────────────────────────────── Stop the whole-page rubber-band when scrolling the main content or the scrollable sidebar nav. Keeps the fixed chrome from bouncing. */ .main-area, .sidebar { overscroll-behavior-y: contain; } /* ========================================================================== iOS-ONLY block — only standalone WebKit gets these. Guards Android/desktop. ========================================================================== */ @supports (-webkit-touch-callout: none) { /* ── 4. Prevent input zoom-on-focus ───────────────────────────────────── iOS auto-zooms when a focused field's font-size < 16px. Force 16px on form controls (iOS-only so desktop's denser 14px UI is untouched). */ input, select, textarea { font-size: 16px; } /* ── 5. Viewport-height fixes (100vh overflows under the iOS toolbar) ──── The app shell + sidebar use 100vh. Re-point them at the *visible* viewport with dvh (small-vh fallback), so the bottom stays reachable and the home indicator doesn't clip content. */ .app { min-height: 100svh; min-height: 100dvh; } .sidebar { height: 100svh; height: 100dvh; } /* Full-screen overlays that pin to 100vh — match the visible viewport. */ .ai-panel, .file-viewer-modal { height: 100dvh; } } /* ========================================================================== Safe-area insets — keep fixed chrome clear of the notch & home indicator. max() degrades to the plain inset on non-notch devices. Gated on the feature query so only browsers that understand env()/max() apply it. ========================================================================== */ @supports (padding: max(0px)) { /* Sidebar (fixed, full-height) — left nav clears notch top + home indicator bottom + a left-edge inset in landscape. Inline rule already adds bottom inset; we extend top/left and keep bottom via max(). */ .sidebar { padding-top: max(0px, env(safe-area-inset-top)); padding-left: max(0px, env(safe-area-inset-left)); padding-bottom: max(0px, env(safe-area-inset-bottom)); } /* Main content area — pad the trailing/leading edges so content isn't swallowed by the notch in landscape, and clears the home indicator. */ .main-area { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: max(50px, env(safe-area-inset-bottom)); } /* Sticky mobile topbar (.main-area > .topbar, top:0) — push its content below the status-bar/notch so the title isn't hidden under it. */ @media (max-width: 900px) { body .main-area > .topbar { padding-top: max(10px, env(safe-area-inset-top)) !important; } /* Hamburger toggle (fixed top:12px/left:12px) — drop it below the notch and in from the left edge so it stays tappable. */ .sidebar-toggle { top: max(12px, calc(env(safe-area-inset-top) + 6px)); left: max(12px, calc(env(safe-area-inset-left) + 6px)); } } /* Fixed bottom-right floating actions — lift above the home indicator. */ .ai-fab, .kbd-help-fab { bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px)); right: max(22px, calc(env(safe-area-inset-right) + 10px)); } /* Right-side drawers (My Mentions / My Activity) and the AI panel — clear the notch top + home indicator bottom + right edge in landscape. */ .side-drawer, .ai-panel { padding-top: max(0px, env(safe-area-inset-top)); padding-bottom: max(0px, env(safe-area-inset-bottom)); padding-right: max(0px, env(safe-area-inset-right)); } /* Toasts / notification toasts that pin to a screen edge — nudge clear of the safe areas so they aren't half-hidden. */ .toast, .notif-toast { bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px)); } } /* ========================================================================== Touch-target sizing — coarse pointers (touch) only, so desktop's compact density is preserved. >=44px tall per Apple HIG. Uses min-height so it can only grow a control, never shrink layout. ========================================================================== */ @media (hover: none) and (pointer: coarse) { button, .nav-item, .main-tab, .sidebar-toggle, .ai-fab, .kbd-help-fab, a.btn, .btn { min-height: 44px; } /* Icon-only buttons should also be >=44px wide to be comfortably tappable. */ .sidebar-toggle, .ai-fab, .kbd-help-fab { min-width: 44px; } /* …and EVERY icon-only button, not three named ones (mobile audit F13, 21 Oct 2026). The rule above made each button 44px tall but left the width to the module, so close / pin / history / remove / ⋯ buttons measured 12–35px wide × 44 tall on the order page, sample boards, check-ins, Users, Drive, Notes and the calendar. An icon button names itself with aria-label or title (it has no visible words to read), so that is how it is found here. min-width only GROWS a box: a text button is already wider than 44px and looks exactly as before. ZERO specificity (:where): any module rule that sets its own min-width on purpose (Mail's compact "+N" and file chips set 0) wins without a fight; a row that must stay narrow can also say data-compact. */ :where(button[aria-label]:not([data-compact]), button[title]:not([data-compact]), [role="button"][aria-label]:not([data-compact]), .modal-close) { min-width: 44px; } } /* ========================================================================== Phone fields are 16px — ONE rule that actually wins (mobile audit F12, 21 Oct 2026) -------------------------------------------------------------------------- Block 4 above asks for 16px, but only on iOS and at element specificity, so every module rule beat it: measured live at 390 px the fields were 11–14px on Sales (11px filters), Leads, Profile, Accounting, Message Board, Drive, Samples, Fabric & CMT, Customers, Maintenance, the Audit log, Edit order, the task dialog and Fabric Program. iOS zooms the whole page into any field under 16px, and small type is hard to read while typing. This rule is phone-only (narrow OR touch), !important, and carries two :not(#\#) (an id that never exists) so its specificity is above any module's own field rule. Desktop is untouched. Fields that were deliberately set LARGER (the 17px search boxes in components.css) keep their size there with a third :not(#\#). Checkboxes, radios, ranges, file / colour pickers and buttons are not text fields. With this in place the iOS focus zoom-lock in index.html no longer engages anywhere it can see (it only ever acted on fields under 16px); see the note there. Guarded by test/mobile-shell.test.mjs. */ @media (max-width: 760px), (hover: none) and (pointer: coarse) { html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]), select, textarea, [contenteditable="true"], [contenteditable=""]):not(#\#):not(#\#) { font-size: 16px !important; } } /* NOTE: the matching "clear the 44px hamburger" rule for the topbar title is NOT here. The 42px clearance it corrects lives in a