| a data-label="..." plus, where it fits:
m-photo the picture, top-left of the card
m-title the main name, next to the picture
m-sub a small line under the name
m-badge a status badge, top-right of the card
m-actions the row of buttons along the bottom
On desktop none of this changes anything; the normal table stays. */
.page-header--actions { display: flex; align-items: center; gap: 8px; }
.page-header--actions .spacer { flex: 1; }
.search-bar .search-select { max-width: 200px; }
@media (max-width: 768px) {
/* Page title on its own line, action buttons share the next one */
.page-header--actions { flex-wrap: wrap; }
.page-header--actions > div:first-child { flex: 1 1 100%; margin-bottom: 6px; }
.page-header--actions .spacer { display: none; }
.page-header--actions .btn { flex: 1 1 0; justify-content: center; padding: 11px 12px; }
/* Search bar: fields full width; 16px text stops iPhones zooming in on focus */
.search-bar { gap: 10px; }
.search-bar .form-control { max-width: none; flex: 1 1 100%; font-size: 16px; }
.search-bar .btn { padding: 11px 22px; }
/* The rows become the cards, so drop the big white box around them */
.section-card.list-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.list-card .table-wrap { overflow: visible; }
/* Table -> stack of cards. The header row stays for screen readers but is invisible. */
table.data-table.stack-mobile thead {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
table.data-table.stack-mobile,
table.data-table.stack-mobile tbody { display: block; width: 100%; }
table.data-table.stack-mobile tr {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
column-gap: 12px;
padding: 14px;
margin-bottom: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 1px 6px rgba(20, 33, 61, 0.05);
}
/* Every cell: label on the left, value on the right */
table.data-table.stack-mobile td {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-width: 0;
padding: 7px 0;
border: 0;
text-align: right;
font-size: 13px;
}
table.data-table.stack-mobile td::before {
content: attr(data-label);
flex-shrink: 0;
color: var(--text-muted);
font-size: 11.5px;
font-weight: 700;
text-align: left;
}
table.data-table.stack-mobile tr:hover td { background: transparent; }
/* Card header: picture | name + small line | badge */
table.data-table.stack-mobile td.m-photo { grid-column: 1; grid-row: 1 / span 2; padding: 0; justify-content: flex-start; }
table.data-table.stack-mobile td.m-title { grid-column: 2; grid-row: 1; padding: 0; align-self: end; justify-content: flex-start; text-align: left; font-size: 15px; font-weight: 700; }
table.data-table.stack-mobile td.m-sub { grid-column: 2; grid-row: 2; padding: 2px 0 0; align-self: start; justify-content: flex-start; text-align: left; font-size: 12px; color: var(--text-muted); }
table.data-table.stack-mobile td.m-badge { grid-column: 3; grid-row: 1; padding: 0; align-self: start; }
table.data-table.stack-mobile td.m-photo::before,
table.data-table.stack-mobile td.m-title::before,
table.data-table.stack-mobile td.m-sub::before,
table.data-table.stack-mobile td.m-badge::before,
table.data-table.stack-mobile td.m-actions::before,
table.data-table.stack-mobile td.m-empty::before { content: none; }
table.data-table.stack-mobile .photo-thumb { width: 48px; height: 48px; }
/* Buttons along the bottom of the card */
table.data-table.stack-mobile td.m-actions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
margin-top: 8px;
padding: 12px 0 0;
border-top: 1px solid var(--border);
}
table.data-table.stack-mobile td.m-actions .btn { flex: 1 1 auto; justify-content: center; }
table.data-table.stack-mobile td.m-empty { justify-content: center; text-align: center; color: var(--text-muted); }
}
/* ===================== INLINE FORMS ("Add new ..." bars) ===================== */
/* A row of fields plus a button that becomes one full-width column on phones:
...
Field widths on desktop: field-sm 140px, field-130, field-150, field-160, field-170, field-190, field-md 200px, field-lg 220px, field-260.
Keep these width rules ABOVE the phone @media block below, or they will beat its width:100%. */
.inline-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .form-group { margin-bottom: 0; }
.inline-form .field-sm { width: 140px; }
.inline-form .field-md { width: 200px; }
.inline-form .field-lg { width: 220px; }
.inline-form .field-160 { width: 160px; }
.inline-form .field-190 { width: 190px; }
.inline-form .field-130 { width: 130px; }
.inline-form .field-260 { width: 260px; }
.inline-form .field-150 { width: 150px; }
.inline-form .field-170 { width: 170px; }
@media (max-width: 768px) {
.inline-form { flex-direction: column; align-items: stretch; }
.inline-form .form-group { width: 100%; }
.inline-form .form-control { width: 100%; font-size: 16px; }
.inline-form .btn { width: 100%; justify-content: center; padding: 12px 18px; }
/* Cards: hide a labelled line when its value is blank (e.g. a class with no section) */
table.data-table.stack-mobile td:empty { display: none; }
/* Cards with no picture (Classes etc.): add class "stack-mobile--plain" to the table.
Put m-title on the main cell; it gets the whole top line. */
table.data-table.stack-mobile.stack-mobile--plain tr { grid-template-columns: minmax(0, 1fr); }
table.data-table.stack-mobile.stack-mobile--plain td.m-title {
grid-column: 1; grid-row: auto; padding: 0 0 6px; font-size: 16px;
}
/* Optional: show the card title as a bright pill (add class "m-title--pill" to the title cell).
To change the colour, edit the two hex values in the gradient. */
table.data-table.stack-mobile td.m-title.m-title--pill {
justify-self: start; /* shrink to the text instead of stretching across the card */
padding: 5px 14px;
margin-bottom: 8px;
font-size: 15px;
letter-spacing: 0.2px;
color: #fff;
background: linear-gradient(135deg, #2EAE6B, #1D8A52);
border-radius: 999px;
}
}
/* ===================== TWO-COLUMN GRIDS, CHECKLISTS, STACKED FORMS ===================== */
/* two equal cards side by side
left card 1fr, right card 1.3fr
Both become a single column on phones.
scrolling box of checkboxes, bigger tap targets on phones
|