/* ==========================================================================
mobile.css — canonical mobile rules for rps-logistics
--------------------------------------------------------------------------
This file is loaded AFTER /css/style.css on every HTML page (see the
tag in each public/*.html). All rules here are wrapped in
@media queries so the existing desktop layout is untouched at
>= 1025px (and table card-view stays off at >= 641px so tablets keep
their horizontal-scroll tables).
Three named tiers (kept as CSS custom properties for greppability):
--bp-phone: 640px (phones: card-view tables, full-screen modals,
stacked forms, 44px touch targets)
--bp-drawer: 900px (phones + portrait tablets: slide-in sidebar)
--bp-tablet: 1024px (anything narrower than this is "mobile-ish")
Rule of thumb:
- Drawer behaviour fires at <= --bp-drawer (so iPad portrait gets it).
- Card-view tables / full-screen modals / stacked forms fire at
<= --bp-phone (tablets keep tables horizontal-scroll, modals
centered).
========================================================================== */
:root {
--bp-phone: 640px;
--bp-tablet: 1024px;
--bp-drawer: 900px;
}
/* --------------------------------------------------------------------------
Drawer sidebar (<=900px)
--------------------------------------------------------------------------
At drawer-tier viewports the sidebar becomes a slide-in panel. The
.app grid collapses to a single column so main fills the width; the
sidebar is fixed-position, translated off-screen by default, and
slides in when gets the .drawer-open class.
See public/js/app.js Drawer state machine for the JS side.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* Main fills the width — sidebar becomes an overlay, not a column. */
.app { grid-template-columns: 1fr; }
/* Sidebar = fixed-position drawer, slid off-screen by default. */
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100vh;
width: min(86vw, 320px);
z-index: 200;
transform: translateX(-100%);
transition: transform .22s ease-out;
box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
will-change: transform;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Reset any inline-strip styling from style.css legacy rule. */
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
padding: 18px 14px;
gap: 0;
}
body.drawer-open .sidebar { transform: translateX(0); }
/* Restore the desktop look INSIDE the drawer (the legacy 780px rule
converted these to a horizontal strip — undo that). */
.sidebar-user { display: flex; }
.sidebar .nav { flex-direction: column; gap: 4px; padding: 0; min-width: 0; overflow: visible; }
.sidebar .nav-label { display: block; }
.sidebar .nav a { padding: 10px 12px; font-size: 14px; white-space: normal; }
.sidebar-footer { flex-direction: column; gap: 8px; margin-top: 12px; flex: 0 0 auto; }
/* Backdrop covers everything except the drawer when open. */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
z-index: 150;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
}
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
/* Hamburger: 44x44 touch target inside the topbar, shown only here. */
.hamburger-btn {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
margin-right: 4px;
cursor: pointer;
flex: 0 0 auto;
}
.hamburger-btn:focus-visible {
outline: 2px solid var(--accent, #4f46e5);
outline-offset: 2px;
}
/* Close-X inside the drawer header (visible only when drawer open). */
.sidebar .sidebar-logo { position: relative; }
.drawer-close {
position: absolute;
top: 6px;
right: 6px;
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
display: inline-grid;
place-items: center;
cursor: pointer;
}
.drawer-close:focus-visible {
outline: 2px solid var(--accent, #4f46e5);
outline-offset: 2px;
}
/* Sticky topbar so the hamburger is always reachable while scrolling. */
.topbar {
position: sticky;
top: 0;
z-index: 80;
background: var(--bg);
}
}
/* Desktop: hide the drawer chrome entirely. */
@media (min-width: 901px) {
.hamburger-btn { display: none; }
.drawer-backdrop { display: none; }
.drawer-close { display: none; }
}
/* Reduced motion: no slide animation. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.sidebar { transition: none; }
.drawer-backdrop { transition: none; }
}
/* --------------------------------------------------------------------------
Card-view tables (<=640px, phone tier only)
--------------------------------------------------------------------------
On phones, every row in a data-heavy table becomes a stacked card with
label/value pairs. The label comes from each
's data-label attr
(which the renderer must set — see source-page.js for the pattern).
Class hooks covered:
.src-tbl (source-page.js / hk-bidding-page.js)
.data-table (drivers / companies / vehicles / etc.)
.tours-table (dashboard / driver detail modals)
.nd-tbl (dashboard Next Deliveries)
.card-table (generic class new code can opt-in via)
If a