/* ==========================================================================
pos_mobile.css — phone/tablet layer for the COMPILED POS SPA.
Injected by run.py's _SpaPatch into the React shell (the bundle and its
stylesheet /assets/index-A6yxq7Mn.css are never edited). Everything here is
an override of that stylesheet, so it must load after it — the injected
sits at the end of , which satisfies that.
The compiled CSS already had a @media (max-width:768px) block, but it was
incomplete in three ways that made the SPA unusable on a phone:
1. NO WAY TO OPEN THE NAV. It parks .sidebar off-canvas and defines
.sidebar.open to slide it back, but the bundle renders no hamburger and
nothing ever sets .open — so below 768px there was no navigation at all.
pos_mobile.js injects the button; the drawer rules live here, keyed off
a class on (React re-renders can't clobber that).
2. .main-content is a flex child of .app-layout and kept its default
min-width:auto, so a wide table stretched .main-content — and therefore
the whole page — past the viewport. That ALSO defeated .table-wrap's own
overflow-x:auto, because the wrap grew with the table instead of
clipping it. One `min-width:0` fixes Products / Inventory / Bills /
Customers at once. Deliberately NOT inside a media query: it is correct
at every width.
3. .pos-layout (billing) was switched to one column for mobile but kept its
desktop height:calc(100vh - 73px), so the Order Summary column was
forced back on top of the product search instead of stacking under it.
Layout contract this file assumes (all from the compiled bundle):
.app-layout > .sidebar + .main-content > .page-header + .page-body
.pos-layout > .pos-main + .pos-sidebar (billing screen)
.table-wrap > table (every data table)
========================================================================== */
/* --------------------------------------------------------------------------
1. Root containment fix — see note 2 above. All widths, on purpose.
-------------------------------------------------------------------------- */
.main-content { min-width: 0; }
.page-header, .page-body { min-width: 0; max-width: 100%; }
/* Same defect one level down: flex AND grid children both default to
min-width:auto, so a nowrap table inside a .grid-2 cell pushes the cell —
and the page — wide again. Containment has to hold all the way down. */
.grid-2 > *, .grid-3 > *, .stats-grid > *, .card { min-width: 0; }
/* Tables scroll inside their wrapper instead of stretching the page. */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* The same defect in the billing grid. .pos-layout is a grid, and a grid track
sized 1fr still takes min-width:auto for its item — so the widest thing
inside .pos-main sets the track width. The size x colour picker renders a
display:table matrix (565px for 8 colours), which dragged the track, the
page, and therefore the entire screen sideways: adding an item scrolled the
whole UI right instead of scrolling just the matrix.
With the track contained, .wwpk-matwrap's own overflow-x:auto finally does
its job and only the matrix pans left/right, which is the intended gesture.
This also repairs position:fixed on this screen. In mobile browsers a
horizontally overflowing page widens the layout viewport, and fixed elements
resolve against THAT — so the checkout bar and the offline pill were being
pinned to a 646px-wide phantom viewport and pushed off-screen. They are only
correct while the page does not overflow. */
.pos-main, .pos-sidebar { min-width: 0; }
/* Belt and braces: the popup can never outgrow the column that now bounds it. */
.wwpk-pop { max-width: 100%; }
/* mountBurger() injects the hamburger at every width (it cannot know the
breakpoint), and ALL of its styling lives in the 768px block below — so above
the breakpoint it was rendering as a default-styled