/* ============================================================================ admin-mobile.css — responsive layer for the admin surface (phones/tablets). SCOPING IS LOAD-BEARING. Every rule in this file is prefixed with `.admin-content` (the
that wraps @Body in AdminLayout) or `.admin-layout` (the shell root). Both exist ONLY in AdminLayout, so nothing here can reach the POS, KDS, floor editor, kiosk, or the public/QR menu — they render under MainLayout/PublicLayout. This mirrors the warning at the top of admin-pages.css: an earlier flat-global admin stylesheet leaked a `.modal-backdrop { z-index }` rule app-wide and swallowed clicks on the POS modifier modal. Do not add unprefixed selectors to this file. SPECIFICITY. Blazor's scoped CSS (Mesero.Client.styles.css) loads AFTER this file, and a scoped `.foo` compiles to `.foo[b-hash]` — specificity (0,2,0). `.admin-content .foo` is also (0,2,0), so on a tie the scoped page rule wins. Where this layer must override a page's own desktop grid/flex declaration, `!important` is therefore required, not lazy. It is used ONLY on the handful of properties that must win (grid-template-columns, flex-direction, min-width) and only inside a max-width media query, so desktop is untouched. BREAKPOINTS. 1024px = sidebar collapses to a drawer (set in AdminLayout). 768px = small tablet. 640px = phone. 480px = small phone (iPhone SE/mini). ============================================================================ */ /* --------------------------------------------------------------------------- 1. Utilities the pages opt into (used by page markup, all breakpoints). --------------------------------------------------------------------------- */ /* Wrap any wide in
to make it scroll inside its own box instead of widening the document. min-width:max-content keeps the table at its natural width so columns don't squash into unreadable slivers. */ .admin-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; } .admin-content .table-wrap > table { min-width: max-content; } /* A horizontal strip (tab bars, filter chips, period pickers) that should scroll rather than wrap or clip. The scrollbar is hidden — on touch it's noise. */ .admin-content .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; flex-wrap: nowrap; scrollbar-width: none; } .admin-content .scroll-x::-webkit-scrollbar { display: none; } /* --------------------------------------------------------------------------- 2. Phone + tablet: nothing may exceed the viewport. --------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* Replaced media objects are the classic silent overflow source. */ .admin-content img, .admin-content video, .admin-content canvas, .admin-content iframe { max-width: 100%; height: auto; } /* Long unbroken strings (URLs, slugs, API keys, NIFs, emails) can't wrap at a space, so they push the layout wide. Break them anywhere instead. */ .admin-content .break-anywhere, .admin-content code, .admin-content pre { overflow-wrap: anywhere; word-break: break-word; } /* Safety net for tables that have not (yet) been wrapped in .table-wrap. A bare wide table is the single most common way an admin page blows out the document width. display:block turns the table into its own scroll box. Pages should still use .table-wrap — this is the fallback, not the plan. */ .admin-content table:not(.table-wrap table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* --------------------------------------------------------------------------- 3. Phone: collapse the shared layout vocabulary to a single column. These class names are the repeated vocabulary across the admin pages (page-header / card / stat-card / form-row / toggle-row / tabs). Collapsing them centrally is what makes ~100 pages usable without ~100 bespoke edits. --------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Page headers are `display:flex; justify-content:space-between` almost everywhere: a title on the left and action buttons on the right. At phone width the buttons get squeezed to nothing or shoved off-screen. Stack. */ .admin-content .page-header, .admin-content .section-header, .admin-content .card-header { flex-direction: column !important; align-items: stretch !important; gap: 12px; } /* ...and let the action cluster use the full width once stacked. */ .admin-content .page-header .header-actions, .admin-content .page-header .actions, .admin-content .section-header .actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } /* Multi-column form rows stack. Covers both the grid and flex variants. */ .admin-content .form-row, .admin-content .form-grid { grid-template-columns: 1fr !important; flex-direction: column !important; align-items: stretch !important; } /* Form fields must not carry a desktop min-width into a 390px viewport. */ .admin-content .form-group, .admin-content .form-input, .admin-content .form-select, .admin-content input, .admin-content select, .admin-content textarea { min-width: 0 !important; max-width: 100%; } /* Label-left / control-right settings rows: keep them side-by-side (they read better that way) but let the label shrink and wrap instead of forcing the row wide. */ .admin-content .toggle-row { gap: 12px; } .admin-content .toggle-row > *:first-child { min-width: 0; overflow-wrap: break-word; } /* KPI / stat strips: 2-up on a phone rather than 1-up — these are short numeric tiles and a single column wastes the width and buries the page. */ .admin-content .stats-grid, .admin-content .stat-grid, .admin-content .stats, .admin-content .kpi-grid, .admin-content .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .admin-content .stat-card, .admin-content .stat { min-width: 0 !important; } /* Numbers are the most common nowrap overflow inside a tile. break-word, NOT anywhere: `anywhere` also collapses the element's min-content width to a single character, so a grid/flex track shrinks to nothing and then splits ordinary words mid-letter — the Catalog price tile rendered its "Precios" label as "Preci/os". break-word only breaks a word that genuinely cannot fit, which is what we actually want here. */ .admin-content .stat-value, .admin-content .stat-label { min-width: 0; overflow-wrap: break-word; } /* Content card grids go single-column: unlike KPI tiles these hold real content (forms, lists, charts) and are unreadable at half a phone width. */ .admin-content .cards-grid, .admin-content .card-grid, .admin-content .grid-2, .admin-content .grid-3, .admin-content .two-col, .admin-content .three-col { grid-template-columns: 1fr !important; } .admin-content .card { min-width: 0; } /* Tab strips WRAP rather than scroll. They were previously a nowrap strip with overflow-x:auto and the scrollbar hidden. That kept the document from overflowing, but it meant the last tab was sliced down the middle with nothing to indicate it could be scrolled to — Fidelización needed 493px in a 342px box, CRM 721px. A sliced tab just reads as broken. The strips are short (3-6 tabs everywhere in the admin), so wrapping costs at most one extra row and guarantees no tab is ever hidden or cut. !important because several pages re-declare nowrap/overflow-x on .tabs in their own scoped CSS, which loads AFTER this file at equal specificity and would otherwise win (Loyalty and Crm did exactly that). This keeps the decision in one place instead of leaving it to whichever page was edited last. */ .admin-content .tabs, .admin-content .tab-strip, .admin-content .tab-bar, .admin-content .period-tabs, .admin-content .filter-chips { display: flex; flex-wrap: wrap !important; gap: 6px; overflow-x: visible !important; } /* Trim the desktop padding so the wrapped rows stay compact and most strips still fit on one line. */ .admin-content .tab, .admin-content .period-btn { flex: 0 1 auto; white-space: nowrap; padding-left: 12px; padding-right: 12px; } /* Comfortable touch targets (Apple HIG / WCAG 2.5.5 = 44px). min-WIDTH too, not just height: icon-only buttons passed the height check while measuring 27-40px wide (the Catalog card actions were 27x44), which is exactly the mis-tap-prone shape. Checkboxes/radios are excluded — they are sized by the label's hit area, and forcing 44px on the box itself just distorts the control. */ .admin-content .btn, .admin-content button, .admin-content .tab { min-height: 44px; min-width: 44px; } .admin-content input[type="checkbox"], .admin-content input[type="radio"] { min-width: 0; min-height: 0; } /* iOS Safari zooms the viewport when focusing an input whose font-size is below 16px, which shoves the whole layout sideways. !important is required, not lazy: `.admin-content input` is specificity (0,1,1), while a page's scoped `.form-control` compiles to `.form-control[b-hash]` = (0,2,0) and wins. That is why this rule silently lost — an external audit found 12 of 13 inputs in the Inventory panel still at 14px despite it. */ .admin-content input:not([type="checkbox"]):not([type="radio"]), .admin-content select, .admin-content textarea { font-size: 16px !important; } /* The support FAB floats bottom-right; give the page room to scroll clear of it so the last row/button isn't permanently covered. */ .admin-content { padding-bottom: 88px; } } /* --------------------------------------------------------------------------- 4. Small phones (<=480px): KPI tiles go 1-up once 2-up would be too tight. --------------------------------------------------------------------------- */ @media (max-width: 380px) { .admin-content .stats-grid, .admin-content .stat-grid, .admin-content .stats, .admin-content .kpi-grid, .admin-content .summary-grid { grid-template-columns: 1fr !important; } }