/* ─────────────────────────────────────────────────────────────────────────────
* mobile.css — shared phone-width corrections for every HeartCore portal.
*
* Every page inlines its own CSS, so before this file the same four defects were
* repeated independently in each template. This is the one place they are fixed.
* Link it from every page:
*
* Everything here is inside a max-width media query. Nothing in this file may
* change rendering at 769px and above — that is the contract, and the probe in
* the audit checks it.
*
* Scope is Phase 1: make the portals usable on a phone. Readability work
* (card-per-row tables, chart breakpoints) is deliberately not here.
* ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* ── 1. Tables scroll instead of clipping or dragging the page sideways ─────
* The tables are bare
children of .card / .card-body, so there is no
* wrapper element to make scrollable — we make the container itself scroll.
* ops.html sets .card{overflow:hidden}, which clipped the Approve/Deny column
* out of reach entirely; overflow-x:auto is what converts that into a scroll.
* :has() is used so only containers that actually hold a table are affected. */
.card:has(> table),
.card:has(> div > table),
.card-body:has(> table),
.card-body:has(> div > table),
.table-responsive,
.tab-section:has(> table) {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* Headers stay on one line so a scrolled column is still identifiable. */
table th { white-space: nowrap; }
/* Row actions must not collapse into an unreadable column. */
table td .btn,
table td .btn-sm,
table td button { white-space: nowrap; }
/* ── 2. Tab bars become a swipeable strip ───────────────────────────────────
* The tab strips (.tab-nav in Sales/Ops, .tabs in Legacy Maker) are plain flex
* rows with no wrap and no overflow, so buttons spill
* off-screen with no affordance — four admin tabs in the Sales portal were
* reachable only by panning the whole document. */
.tab-nav, .tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none; /* the fade below is the affordance */
padding-left: 12px;
padding-right: 12px;
}
.tab-nav::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.tab-nav > *, .tabs > * { flex: 0 0 auto; }
/* ── 3. Inputs at 16px so iOS does not zoom on focus ────────────────────────
* Mobile Safari zooms the viewport whenever a focused field is under 16px and
* does not zoom back out on blur. Every input in the app was 12–15px,
* including the login form. !important is required because several fields
* carry the size in an inline style attribute. */
input, select, textarea,
.form-control, .form-select, .form-input,
.search-input, .crm-input, .hc-date-input {
font-size: 16px !important;
}
/* A 16px date field no longer fits a hardcoded 130px box. */
.date-filter input,
input[type="date"] { width: auto !important; min-width: 0; max-width: 100%; }
.date-filter { flex-wrap: wrap; }
/* Text fields sized for a desktop sidebar must not force the page wide. */
.search-box, .search-input, .crm-input-wide, .crm-input-sm {
width: 100% !important; max-width: 100%;
}
/* ── 4. Overlays are bounded by the viewport ────────────────────────────────
* crm.html and lm_dashboard.html already cap their drawers correctly; the two
* below were written without a cap and overhang the screen. The tour popovers
* pin an explicit width with !important, so they need the same weight back. */
#crm-detail-drawer,
#chat-drawer,
.side-panel, .drawer, .modal, .notif-panel, #notif-panel {
max-width: 94vw !important;
}
/* Anchored panels: pin to both edges rather than overhanging one of them. */
#chat-drawer {
left: 12px; right: 12px; width: auto !important;
max-height: calc(100dvh - 140px);
}
.notif-panel, #notif-panel { width: min(320px, 88vw) !important; }
/* Guided-tour popovers hardcode width:420px !important. */
.hc-tour-popover, .hc-pc-tour-popover, .driver-popover {
width: 92vw !important; min-width: 0 !important; max-width: 92vw !important;
}
/* Full-height overlays: 100vh is measured with the browser chrome hidden, so
* the bottom row — usually the primary action — sits behind the address bar. */
#crm-detail-drawer, .side-panel, .drawer { height: 100dvh; }
/* Modal shells that centre a dialog need room to breathe at phone width. */
.modal-overlay, .contact-modal { padding: 12px !important; }
}
@media (max-width: 768px) {
/* ── 5. Page header bars wrap instead of overhanging ────────────────────────
* Every portal has a header built as a single flex row with
* justify-content:space-between and no wrap — a title on the left, a cluster
* of controls on the right. At phone width the cluster cannot shrink far
* enough and pushes the document sideways: 144px in the Sales portal, 30px in
* Legacy Maker. Allowing the row to wrap costs nothing on desktop, where it
* never reaches the wrap point. */
.hc-nav, .hc-nav-right, .topbar, .page-header, .card-header {
flex-wrap: wrap;
row-gap: 8px;
}
/* Flex children default to min-width:auto, which blocks them from shrinking
* below their content and is why these rows overflowed rather than wrapped. */
.hc-nav > *, .hc-nav-right > *, .topbar > *, .page-header > *, .card-header > * {
min-width: 0;
}
/* ── 6. Fixed-count grids get a floor that yields ───────────────────────────
* repeat(2,1fr) and minmax(px,1fr) both force a track wider than a
* phone. min(100%, Npx) keeps the desktop intent while letting the track
* collapse when there is not room for it. */
.kpi-cards-row, .kpi-bar, .int-db-grid, .kpi-charts-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
gap: 10px;
}
/* ── 7. Long unbroken strings ───────────────────────────────────────────────
* Headings and identifiers (tokens, emails, Shopify handles) have no break
* opportunity and overflow their own box. */
h1, h2, h3 { overflow-wrap: break-word; }
td, th { overflow-wrap: break-word; }
}