/* ============================================================================ NEXPORTAL MOBILE LAYER (public/css/mobile.css) ============================================================================ Plain CSS, no build step, loaded AFTER every other stylesheet in every layout (cache-busted with filemtime). Pairs with public/js/mobile.js. Standard: docs/mobile-ux-research.md + its "Round 2" section (COMPACT SCALE): body 13/18, dense rows 12.5/17, labels/badges 12/16 (hard floor), h1 17, h2 14.5, h3 13, KPI 18. Inputs: 16px text (iOS zoom) in a 36px box, padding 6/10, radius 8. Buttons: 32px visible, 13px text, radius 8, invisible >=44px hit area (::after inset -6px). Cards: padding 10, radius 8, gap 10; page gutter 12. Top bar 44px. RULES OF THE HOUSE - Everything that changes layout lives inside @media (max-width: 767px). Desktop (>=1024px) must render exactly as before. - Selectors use :where() (specificity 0) + !important where an inline style or a legacy !important rule has to be beaten. A page can still win with a more specific !important rule, or opt out with the attributes below. - NEVER set `display` with !important on generic elements: Alpine x-show writes display:none inline and would be overridden. OPT-OUT / HOOK CLASSES (see also the header of public/js/mobile.js) table: data-no-cards | .mobile-scroll | .mobile-cards | td[data-label] | td[data-m=title|actions|skip] modal: data-no-sheet grid: data-no-grid | data-grid2 sticky: data-keep-sticky text: data-no-floor tap: data-no-tap whole-region opt-out: .m-off ROUND 2 HOOKS (page agents: use these exact names; all are phone-only, <768px) --------------------------------------------------------------------------- .m-ovf Overflow menu container (a flex row of buttons/links/forms). [data-m-secondary] child that moves into the "Meer acties" panel (hidden inline on phones). [data-m-keep="N"] on the container: keep first N children visible, rest become secondary. .m-ovf-btn trigger appended by mobile.js (do NOT write it yourself). .m-ovf-open set on the container while the panel is open. Secondary items are NOT moved/cloned: forms still submit, Alpine @click still works. Panel rows are 40px; a
row = its submit button. (Alpine x-show on a secondary item keeps working: inline display:none wins.) Add data-m-danger to a secondary item to colour it red. .m-page-head Title left + primary action right. Children: h1 | .m-page-title (flex, clamps 2 lines), .m-page-actions (flex:0 1 auto; holds primary button + optional .m-ovf). Buttons/links inside never clip or get overlapped by icons (inline icon + ellipsis). .m-toolbar Row of controls that scrolls horizontally with a fade edge instead of wrapping. .m-wrap-row Set by mobile.js on any nowrap flex row of >=3 buttons/links that would overflow (wraps with 8px gaps). Opt out with data-no-wrap or .m-toolbar/.m-ovf/.m-seg. .m-seg Segmented control: equal-width cells (/