, and a dedicated first | per row holding a
.mobile-summary + collapsible .mobile-details) — column-priority hiding
(.col-priority-low, above) stays the default for simpler tables; this is
for tables where hiding columns still leaves too much to read from a
horizontally-scrolled row. Toggle behavior is delegated globally in
js/app.js §9, so no per-view script is needed. These two base rules hide
the mobile-only markup at any width by default; the @media blocks below
swap that per breakpoint. */
.mobile-summary,
.mobile-details { display: none; }
@media (max-width: 767px) {
.app { grid-template-columns: 1fr; }
.hamburger { display: inline-flex; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 240px;
padding: 24px 14px;
transform: translateX(-100%);
transition: transform .2s ease;
z-index: 100;
box-shadow: var(--shadow-lg);
}
.sidebar-logo { text-align: left; padding: 0 10px; }
.sidebar-logo span { display: inline; }
.nav-section-label { display: block; }
.nav-link { justify-content: flex-start; padding: 8px 10px; }
.nav-link .label { display: inline; }
.nav-user { display: block; }
body.drawer-open .sidebar { transform: translateX(0); }
body.drawer-open .sidebar-scrim { display: block; opacity: 1; }
.main { padding: 20px 16px 84px; }
.two-col { grid-template-columns: 1fr; }
.three-col { grid-template-columns: 1fr; }
.dashboard-grid { grid-template-columns: 1fr; }
/* Phase D — verified at 320px per §15's viewport matrix: two 150px tiles
plus a 12px gap (312px) already just fits 320, but leaves only 8px of
breathing room against the .main padding below, so this nudges the
minimum down slightly for a less cramped 2-per-row layout on the
narrowest supported phones. */
.stats-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bottom-tabs { display: flex; }
/* Phase E — §15's "column-priority hiding": on simple list tables (PO,
Invoices, Checks, Items…), the lower-priority columns (called out per
table via .col-priority-low on both the | and its matching | )
drop out below mobile width instead of forcing horizontal scroll to
read the columns that actually matter at a glance (number/name/amount/
status). Table stays a real — .table-wrap's existing
overflow-x:auto remains the floor for any table that's still too wide
after this. Also compacts every table's padding/font-size generally,
per the reported issue that rows needed horizontal scroll to be
legible on phone widths even before counting hidden columns. */
.table-wrap table { font-size: 12px; }
.table-wrap th { padding: 8px 10px; }
.table-wrap td { padding: 9px 10px; }
.col-priority-low { display: none; }
/* Phase E — §15's "complex multi-line form" pattern: on phone widths,
line-item entry tables (PO/Invoice line items — opt in with
.line-items-table) switch from a horizontally-scrolling table row to
one-item-at-a-time stacked fields, so editing Qty/Price never requires
scrolling right. Reported directly against PO create's Line Items. */
.line-items-table thead { display: none; }
.line-items-table,
.line-items-table tbody,
.line-items-table tr,
.line-items-table td {
display: block;
width: 100% !important;
}
.line-items-table { min-width: 0 !important; }
.line-items-table tr.item-row {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
padding: 12px;
margin-bottom: 12px;
}
.line-items-table td {
padding: 6px 0;
border-bottom: none;
}
.line-items-table td[data-label]::before {
content: attr(data-label);
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink-soft);
margin-bottom: 4px;
}
/* !important: some line-items-table instances set a fixed px width inline
on the input itself (e.g. invoices/create.php's Qty This Invoice field,
90px to fit its old table column) — that inline style otherwise beats
any external rule and would leave a tiny 90px input sitting under a
full-width label on the stacked mobile card. */
.line-items-table input,
.line-items-table select,
.line-items-table .item-picker-cell { width: 100% !important; }
.line-items-table td:last-child { padding-top: 4px; }
.line-items-table td:last-child .remove-item { width: 100%; }
/* Receivers "Unit Price" cell wraps the input with edit/history icon
buttons in a flex row (.price-field-wrap, see po_receipts/create.php) —
forcing the input itself to width:100% (the generic rule above) would
push those buttons out past the card edge. Let flex handle the sizing
instead, same as it already does on desktop. */
.line-items-table .price-field-wrap { width: 100%; }
.line-items-table .price-field-wrap input { width: auto !important; flex: 1 1 auto; }
/* Phase F — full-screen search sheets: the Advanced Item/Vendor Search
modal (js/item-picker.js, js/vendor-picker.js) is a centered 860px
dialog with the results table capped at 50vh on desktop; below mobile
width that left a cramped, double-scrolling box. Here it expands to
fill the viewport so results get real room, with the header/filters/
pagination/actions pinned and only the table itself scrolling. */
.modal-overlay.adv-search-modal { padding: 0; align-items: stretch; }
.adv-search-modal .modal.modal-wide {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
padding: 16px;
display: flex;
flex-direction: column;
}
.adv-search-modal .modal > h3,
.adv-search-modal .adv-filters,
.adv-search-modal .adv-pagination,
.adv-search-modal .modal-actions { flex: 0 0 auto; }
.adv-search-modal .table-wrap { flex: 1 1 auto; max-height: none; }
/* Mobile Card Table — see the component comment above .col-priority-low's
media block for the opt-in markup this expects. */
.mobile-card-table { border-collapse: separate; border-spacing: 0; }
.mobile-card-table thead { display: none; }
.mobile-card-table,
.mobile-card-table tbody,
.mobile-card-table tr,
.mobile-card-table td { display: block; width: 100%; }
.mobile-card-table tbody { display: grid; gap: 12px; }
.mobile-card-table tr.row-card {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow);
}
/* Hide the desktop cells — their data is represented by the mobile
summary/details below instead. */
.mobile-card-table tr.row-card > td { display: none; }
.mobile-card-table tr.row-card > td.mobile-cell { display: block; border: 0; padding: 0; }
/* purchase_orders/show.php's Receipts table nests a desktop-only expand/
collapse sub-row (.row-expand-toggle / .row-detail, unrelated to this
component) inside a .mobile-card-table. Its own toggle button lives in
a regular (non-.mobile-cell) | , so it's already hidden on mobile by
the rule above — but the sub-row itself is a sibling | , not a | ,
so without this it would be forced open by the generic
".mobile-card-table tr { display:block }" rule above, regardless of its
default-closed ".row-detail" state. The card's own mobile-details panel
(opt-in content, not this sub-row) covers the same info on mobile. */
.mobile-card-table tr.row-detail { display: none; }
.mobile-card-table tr.row-detail.open { display: block; }
.mobile-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px 12px;
align-items: start;
padding: 14px;
cursor: pointer;
user-select: none;
}
.mobile-summary-main { min-width: 0; }
.mobile-title {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
font-weight: 700;
font-size: 14px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.mobile-subtitle {
margin-top: 3px;
color: var(--ink-mid);
font-size: 13px;
line-height: 1.4;
overflow-wrap: anywhere;
}
.mobile-summary-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 7px;
text-align: right;
}
.mobile-chevron {
display: inline-flex;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--ink-mid);
font-size: 14px;
line-height: 1;
transition: transform .18s ease, background .18s ease;
}
.row-card.is-expanded .mobile-chevron { transform: rotate(180deg); }
.mobile-metrics {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 2px;
}
.mobile-metric {
min-width: 0;
padding: 8px 9px;
border: 1px solid var(--border);
border-radius: 7px;
background: rgba(127,127,127,.035);
}
.mobile-metric-label {
display: block;
margin-bottom: 2px;
color: var(--ink-soft);
font-size: 10px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .03em;
}
.mobile-metric-value {
display: block;
min-width: 0;
color: var(--ink);
font-size: 13px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.mobile-details { padding: 0 14px 14px; border-top: 1px solid var(--border); }
.row-card.is-expanded .mobile-details { display: block; }
.mobile-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mobile-detail {
display: grid;
grid-template-columns: 42% minmax(0, 58%);
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
line-height: 1.35;
}
.mobile-detail:last-child { border-bottom: 0; }
.mobile-detail-label { color: var(--ink-soft); font-weight: 500; }
.mobile-detail-value { min-width: 0; color: var(--ink); overflow-wrap: anywhere; text-align: right; }
/* Secondary line within a detail value — e.g. items' Purchasing/
Manufacturing UOM ratio under the base Unit of Measure. */
.mobile-detail-value .detail-sub { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.mobile-details-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.mobile-details-actions .btn { flex: 1 1 auto; min-width: 90px; }
/* Opt-in for icon-only buttons (e.g. a 📈 history button) that shouldn't
stretch to the same minimum width as labeled actions. */
.mobile-details-actions .btn-compact { flex: 0 0 auto; min-width: 42px; }
/* Prevent the outer wrapper/table-wrap from clipping a card's shadow or
forcing horizontal scroll now that rows are stacked cards, not a wide
table. Opt in by giving the wrapper div class="mobile-card-wrap". */
.mobile-card-wrap,
.mobile-card-wrap > .table-wrap { overflow: visible; }
}
@media (min-width: 768px) {
.mobile-cell { display: none !important; }
}
| |