/* Shared responsive guard for dashboard pages. Audit P2 (Bert, 2026-05-26): 6 of 8 surfaces overflowed horizontally at 375px (mobile). POS already had an iPad-warning overlay (pos.css:996); inventory / operations / customers / reports / catalog had nothing — just a broken layout the cashier could scroll sideways through. v3 (2026-05-26, Bert audit): the previous full-screen overlay was too harsh — Bert opened the dashboard on a phone and saw an immovable "disaster" instead of any UI. The dashboards aren't mobile-redesigned yet, but blocking the page entirely was worse than letting it render imperfectly. This version: • Renders a slim dismissible top banner instead of a full overlay. • Sticks horizontal-overflow lock on so swipe-scroll doesn't tear the layout sideways. • POS keeps its own dedicated overlay (pos.css) because the cashier terminal truly needs a tablet — that's a different surface and a different message. */ @media (max-width: 1023px) { /* Prevent sideways scroll on broken layouts at narrow widths. */ html, body { overflow-x: hidden; } /* Slim banner above the page chrome, dismissible. JS in responsive_guard.js adds .apa-mobile-dismissed to after click; that hides the banner so the user isn't pestered after acknowledging. */ body:not(.apa-mobile-dismissed)::before { content: "Best on tablet (iPad) or larger. Some controls may overflow on phone — tap for details."; display: block; background: color-mix(in srgb, #f59e0b 14%, var(--bg, #fff)); color: var(--fg, #000); padding: 8px 36px 8px 14px; font-size: 13px; line-height: 1.4; border-bottom: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); position: relative; z-index: 50; } /* Visible × so the banner clearly has an action. */ body:not(.apa-mobile-dismissed)::after { content: "×"; position: fixed; top: 4px; right: 10px; font-size: 22px; line-height: 1; color: var(--fg, #000); z-index: 51; cursor: pointer; padding: 4px 8px; } /* Opt-out: a surface that has actually been made mobile-clean (verified no overflow + usable controls) adds `apa-mobile-ready` to so it doesn't show the apologetic "may overflow" banner. Operations earned this with the compact mobile tab strip + zero-overflow audit. Other surfaces keep the banner until they're verified too. */ body.apa-mobile-ready::before, body.apa-mobile-ready::after { content: none; } }