/* ============================================================================ AU ONE ERP · mobile-responsive.css — CONSTRUCTION, PHONE PRESENTATION ONLY ---------------------------------------------------------------------------- Owner, 2026-09-03: "Do not squeeze a desktop page into a phone. REFLOW desktop content into a real mobile composition. NO SIDEWAYS PAGE SCROLLING." SCOPE. Every rule lives inside `@media screen and (max-width:768px)` (with tighter tiers at 430px and 360px). Desktop and tablet are untouched, and `@media print` is never mentioned — the liquidation form, the weekly PDF and every official layout still print as the tables they are. NOT AN OVERFLOW BANDAGE. There is no `overflow-x:hidden` page fix, no zoom, no transform:scale, no 8px type, no ellipsis on a peso amount. Each rule removes the actual CAUSE: a forced `min-width:1000px`, a `width:max-content`, a 12-column grid on a 390px screen. THE ONE PATTERN, USED FIVE TIMES. A desktop table becomes a stack of cards with NO second copy of the DOM: table → display:block (drops its own min-width) thead → display:none (labels move onto the cells) tr → display:grid (the card) td → display:block (a labelled field in the card) td::before { content:attr(data-l) } (the column name, as a label) `data-l` was added to the existing generated s in petty-cash.js, billing.js and dashboards.js — ATTRIBUTES ONLY. No value, handler, id, class, colspan or event changed, so there is exactly ONE set of live inputs: no mobile clone, no duplicate ids, no double save, no second listener. Every field keeps its DOM identity, so the existing per-field autosave and the granular realtime patching still address the very same node — a mobile card is the same in a different box. This file issues zero requests. WHY EVERY SELECTOR STARTS `html body`. Several Construction modules inject their stylesheet from JavaScript at render time (petty-cash.js, monthly-schedule.js, project-dashboard.js, tracker-modules.js, request-detail-fields.js …). Those