/* ============================================================ * responsive.css — Desktop & tablet progressive enhancement * ------------------------------------------------------------- * PRINCIPLE: the existing mobile layout is excellent and must * stay byte-identical below 768px. Everything in this file is * ADDITIVE and gated behind min-width media queries (or the * `.erp-shell` class that layout.js adds once the desktop * sidebar mounts). Nothing here runs on a phone. * * Breakpoints (match Tailwind + the brief): * 480px small-phone tuning * 768px tablet — wider column, multi-col card grids * 1024px desktop — persistent sidebar shell * 1280px large — max comfortable reading width * ============================================================ */ :root { --erp-sidebar: 264px; /* desktop rail width */ --erp-gap: 0.625rem; /* == Tailwind space-y-2.5 (10px) */ } /* ============================================================ * 1. RESPONSIVE CONTAINER * The app pins every
to .max-w-md (448px). We widen it * responsibly as the viewport grows. Forms / detail / receipt * pages opt OUT of the wide tiers via .max-w-readable so long * forms don't stretch into unreadable line lengths. * ============================================================ */ @media (min-width: 768px) { main.max-w-md { max-width: 720px; } } @media (min-width: 1024px) { main.max-w-md { max-width: 960px; } } @media (min-width: 1280px) { main.max-w-md { max-width: 1100px; } } /* Reading-width cap for forms & single-record pages */ @media (min-width: 768px) { main.max-w-md.max-w-readable { max-width: 760px; } } /* ============================================================ * 2. RESPONSIVE CARD GRID (.rgrid) * Drop-in replacement for `space-y-2.5` on list containers. * 1-up on phones (identical spacing), 2-up tablet, 3-up large. * Works because list items are direct children injected as * innerHTML — no JS change needed. * ============================================================ */ .rgrid { display: grid; gap: var(--erp-gap); grid-template-columns: 1fr; /* phone: single column, same as before */ } @media (min-width: 768px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* A 2-up tier that never goes to 3 (used for dashboard sub-sections) */ .rgrid-2 { display: grid; gap: var(--erp-gap); grid-template-columns: 1fr; } @media (min-width: 1024px) { .rgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .rgrid-2 > * { margin-bottom: 0 !important; } } /* ============================================================ * 3. DESKTOP SHELL (only when layout.js mounted the sidebar) * `.erp-shell` is added to by Layout.mountSidebar(). * Login page never gets it, so it stays perfectly centred. * ============================================================ */ @media (min-width: 1024px) { /* Make room for the fixed sidebar */ html.erp-shell body { padding-left: var(--erp-sidebar); } /* The mobile chrome is replaced by the rail on desktop */ html.erp-shell #app-bottom-nav, html.erp-shell #bottom-nav-spacer { display: none !important; } /* Hamburger is redundant when the rail is always visible */ html.erp-shell #app-header [data-nav="drawer"] { display: none !important; } /* Header gets a touch more breathing room on desktop */ html.erp-shell #app-header > div { padding-top: 0.9rem; padding-bottom: 0.9rem; } } /* The sidebar itself (markup built in layout.js). We control its visibility HERE rather than relying on Tailwind's `hidden lg:flex` — the project's own style.css documents that the Tailwind CDN occasionally fails to paint in time on mobile, so the desktop shell must not depend on it. The Tailwind classes remain on the element as a harmless, agreeing fallback. */ #app-sidebar { width: var(--erp-sidebar); display: none; /* hidden on mobile/tablet */ } @media (min-width: 1024px) { html.erp-shell #app-sidebar { display: flex; } } #app-sidebar .nav-link.active { background: var(--brand-50); color: var(--brand-700); } html.dark #app-sidebar .nav-link.active { background: rgba(99, 102, 241, 0.14); color: var(--brand-300); } #app-sidebar .nav-link.active .nav-ico { background: var(--brand-600); color: #fff; } /* ============================================================ * 4. DASHBOARD — denser, smarter use of width on desktop * ============================================================ */ @media (min-width: 1024px) { /* Hero collection banner can be a bit taller / larger type */ html.erp-shell #hero-today { font-size: 2.75rem; } /* Trend chart gets more vertical room on desktop */ html.erp-shell #chart-host { height: 18rem; } } /* ============================================================ * 5. ACCESSIBILITY * ============================================================ */ /* Visible keyboard focus ring (mouse/touch unaffected) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 0.5rem; } /* Guarantee comfortable tap targets for nav / icon buttons */ #app-bottom-nav button, #app-sidebar .nav-link { min-height: 44px; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ * 6. PERFORMANCE — reduce layout/paint cost & CLS * ============================================================ */ html { scroll-behavior: smooth; } /* Skip rendering offscreen dashboard cards until needed. contain-intrinsic-size reserves space so there is no CLS. */ .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 320px; } /* Images never push layout around while loading */ img { max-width: 100%; height: auto; } /* ============================================================ * 7. SMALL-PHONE TUNING (<= 480px) — avoid cramped 4-up grids * ============================================================ */ @media (max-width: 360px) { /* The dashboard "quick actions" 4-up row gets tight on tiny phones; let labels stay legible by shrinking icon padding. */ main .grid.grid-cols-4 > a { padding-left: 0.35rem; padding-right: 0.35rem; } } /* Utility: hide native scrollbar (was duplicated inline on 2 pages) */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }