/* ============================================================================ Mobile bottom-nav clearance — shared by every portal shell (student, agent, subagent, instructor, clerk, HR, finance, maintenance, master). THE BUG THIS FIXES Each shell pins its bottom nav by hand:

The theme reserves room for that bar with .fixed-footer .app-main .app-main__outer { padding-bottom: 60px } but no shell puts `fixed-footer` on .app-container, so the rule never matches and NOTHING holds space for the bar. Whatever a page ends with — Save, Save and Continue, Submit, Pay, Process — is drawn underneath it. Measured at 375x812: the HR vehicle form's Save button sat 5px below the bar's top edge; the student registration button landed exactly on it. Adding `fixed-footer` is NOT the fix. The theme pairs it with `.fixed-footer .app-footer .app-footer__inner{margin-left:280px}`, which on a 375px phone shrinks the nav to 95px and shoves it off to the right (measured). The clearance is reserved here instead, with none of the theme's other fixed-footer rules coming along. HOW IT IS SCOPED `.sdc-has-bottom-nav` goes on under exactly the same condition that renders the bar, so pages without it are untouched and no dead whitespace appears on desktop. It is on rather than .app-container because the chat launchers are included at body level, outside the container, and they need the same measurement. THE BUDGET — 96px 60px the bar: .app-footer{height:60px} + 12px wrap overflow. The height is hard but .nav wraps, and two ~36px rows centred in a 60px box escape it top and bottom. + 24px so the button is not flush against the bar. env(safe-area-inset-bottom) resolves to 0 today because no shell sets viewport-fit=cover; it is kept so this stays correct if that ever changes. ========================================================================== */ :root { /* One definition, consumed by the page padding and both chat launchers. */ --sdc-bottom-nav-h: 60px; --sdc-bottom-nav-clear: calc(96px + env(safe-area-inset-bottom, 0px)); } .sdc-has-bottom-nav .app-main__outer { padding-bottom: var(--sdc-bottom-nav-clear) !important; } /* -------------------------------------------------------------------------- Keep the bar itself usable. .app-footer is a hard 60px box; with 4 items at 320px — or at 375px in Malay, where Home becomes "Laman Utama" — the row wraps and the last item ("Schedule") renders below the fold where it cannot be tapped. Hold the items on one row and let them shrink instead. -------------------------------------------------------------------------- */ @media (max-width: 480px) { .app-wrapper-footer .app-footer__inner { padding-left: 6px; padding-right: 6px; } .app-wrapper-footer .nav { flex-wrap: nowrap; width: 100%; } .app-wrapper-footer .nav-item { flex: 1 1 0; min-width: 0; } .app-wrapper-footer .nav-link { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0.5rem 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* The shells hardcode z-index:30000 on the bar. That number is far higher than anything else in the app and it loses only to elements outside .app-main__outer — so a full-screen overlay declared INSIDE the page body (an image lightbox, a fullscreen editor, a loading veil) gets the black bar stamped across its bottom no matter how high its own z-index. 900 still puts the bar above every piece of ordinary content (the theme's own layers top out around 12, sticky table headers at 20) while letting real overlays cover it. Verified both ways in the browser. */ .app-wrapper-footer { z-index: 900 !important; } /* Let the bar grow rather than clip its own contents, and lift it off the iOS home indicator. min-height keeps the 60px the clearance budget assumes. */ .app-wrapper-footer .app-footer { height: auto; min-height: var(--sdc-bottom-nav-h); padding-bottom: env(safe-area-inset-bottom, 0px); } /* -------------------------------------------------------------------------- Floating chat launchers. Both are position:fixed at body level, so the page padding above cannot move them — without this the student launcher (bottom:68px, its own hardcoded copy of the bar height) and the staff one (bottom:24px, no awareness of the bar at all) sit on top of the nav and cover two of its items. They are clickable there — .app-main__outer is a flex item with z-index:9, which caps the bar's inline z-index:30000 — but they hide navigation the user needs. -------------------------------------------------------------------------- */ .sdc-has-bottom-nav #sdc-chat-fab, .sdc-has-bottom-nav #staff-chat-fab { bottom: calc(var(--sdc-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; } /* Print: a fixed bar has no business on paper, and it would otherwise be stamped onto every page. */ @media print { .app-wrapper-footer, #sdc-chat-fab, #staff-chat-fab { display: none !important; } .sdc-has-bottom-nav .app-main__outer { padding-bottom: 0 !important; } }