on a narrow phone or tablet screen. table-wrapper's overflow-x:auto
lets it scroll sideways, but nothing signals that's possible — in practice
entire columns, including the Edit/Pause/Delete action buttons, were
invisible and undiscoverable below ~1024px (confirmed at both 768px tablet
and 375px mobile widths). Below that width every .data-table collapses
into one stacked "card" per row instead. 1023px matches the breakpoint
where the sidebar already collapses to the mobile hamburger header, so the
two responsive behaviors switch together.
Contract: every | in a table using this needs a data-label="Column
Name" attribute (see each page's render function) — stays in the
DOM (for screen readers) but is visually hidden at this width, so there's
no other source for the label. An actions cell (no real column header)
should use data-label="" explicitly, not omit the attribute — that's what
switches it from a labeled row to an unlabeled, wrapping button row. */
@media (max-width: 1023px) {
.table-wrapper { overflow-x: visible; }
.data-table, .data-table tbody { display: block; width: 100%; }
.data-table thead {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Row-cards sit inside a .card that's already var(--color-surface) (white).
A flat --color-surface-2 fill (tried first) reads as an off-brand gray
box — every other card in the app is white with a border+shadow, never
a filled tint. Staying white but using the stronger border tone plus a
real (not barely-there) shadow and extra margin gives each row its own
floating-card boundary while matching the app's actual card language. */
.data-table tr {
display: block; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
background: var(--color-surface); box-shadow: var(--shadow-md);
}
.data-table tbody tr:hover { background: var(--color-surface); } /* hover highlight means nothing on touch */
.data-table td {
display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
padding: var(--space-2) 0; text-align: right;
}
.data-table td:last-child { border-bottom: none; }
.data-table td::before {
content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--color-text-muted); text-align: left; flex-shrink: 0;
}
.data-table td[data-label=""] {
display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-start; padding-top: var(--space-3);
}
.data-table td[data-label=""]::before { content: none; }
}
/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-text-muted); }
.empty-state-icon {
width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: var(--radius-full);
background: var(--color-accent-light); color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
}
.empty-state-icon svg { width: 26px; height: 26px; }
.empty-state h3 { color: var(--color-text); margin: 0 0 var(--space-2); font-size: var(--text-lg); }
/* ── Toasts ───────────────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 999; display: flex; flex-direction: column; gap: var(--space-2); max-width: calc(100vw - 2 * var(--space-6)); }
.toast {
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
font-size: var(--text-sm); font-weight: 500; color: #fff; animation: toast-in var(--transition-slow) ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast-success { background: #059669; }
.toast-error { background: #DC2626; }
.toast-info { background: #0284C7; }
.toast-warning { background: #D97706; }
/* ── Dashboard: onboarding checklist ─────────────────────────────────────── */
.checklist-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.checklist-item:last-child { border-bottom: none; }
.checklist-icon {
width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.checklist-icon svg { width: 15px; height: 15px; }
.checklist-icon.done { background: var(--color-success-light); color: var(--color-success); }
.checklist-icon.pending { background: var(--color-surface-2); color: var(--color-text-subtle); border: 2px solid var(--color-border-strong); }
.checklist-text { flex: 1; min-width: 0; }
.checklist-text .title { font-weight: 600; font-size: var(--text-sm); }
.checklist-text .desc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
/* ── Dashboard: plan usage bars ──────────────────────────────────────────── */
.usage-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.usage-row:first-child { padding-top: 0; }
.usage-row:last-child { padding-bottom: 0; border-bottom: none; }
.usage-row-label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); margin-bottom: var(--space-2); gap: var(--space-3); }
.usage-row-label .value { color: var(--color-text-muted); font-size: var(--text-xs); flex-shrink: 0; }
.usage-bar-track { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-accent); transition: width var(--transition-slow); }
.usage-bar-fill.warning { background: var(--color-warning); }
.usage-bar-fill.danger { background: var(--color-danger); }
/* Each usage row also links to where that number is managed (Connect,
Automation Rules, Store, Team, filtered Activity Log) — styled as a plain
block so it reads the same as the non-clickable version, with a hover
affordance as the only tell that it's interactive. */
/* Left/right only, not the shorthand — .usage-row already sets the
top/bottom padding that creates the border-separated spacing between
rows, and a shorthand here would silently override it back to 0. */
a.usage-row-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-md); margin: 0 calc(-1 * var(--space-3)); padding-left: var(--space-3); padding-right: var(--space-3); transition: background var(--transition); }
a.usage-row-link:hover { background: var(--color-surface-2); }
a.usage-row-link:hover .usage-row-label span:first-child { color: var(--color-accent); }
/* ── Dashboard: account/store status rows ────────────────────────────────── */
.status-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.status-row:last-child { border-bottom: none; }
.status-row-badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* ── Auth pages ───────────────────────────────────────────────────────────── */
/* This is the one layout in the app that's mostly empty space around a
single centered card, so it's the one place extra atmosphere is pure
upside — everywhere else (dashboard, tables) it would compete with real
content, which is why this glow is scoped here instead of into the
shared --color-bg-gradient every page already uses. */
.auth-shell {
min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); position: relative; overflow: hidden;
background-image: radial-gradient(circle, var(--color-auth-dot) 1px, transparent 1px); background-size: 26px 26px;
}
.auth-shell::before, .auth-shell::after {
content: ''; position: absolute; width: 620px; height: 620px; border-radius: 50%;
filter: blur(90px); pointer-events: none; z-index: 0;
}
.auth-shell::before { top: -220px; left: -160px; background: var(--color-auth-glow-a); }
.auth-shell::after { bottom: -240px; right: -180px; background: var(--color-auth-glow-b); }
.auth-card { width: 100%; max-width: 408px; position: relative; z-index: 1; }
|