(desktop and screen readers), give every secondary | a data-label="Column"
(printed before the value on the card), and mark the cells that lead the card: class="cd-top" on the number / name cell, "cd-chip" on
the status chip, "cd-sum" on the money. They sit on the card's first line, unlabelled, in that order, the money on the right. The whole
card is the tap target: the .row-link stretches over its card. Taken from the Sales module's page-local .sl-cardtable, made generic. */
@media (max-width: 640px) {
.cardtable { border: 0; background: transparent; overflow: visible; }
.cardtable table { display: block; width: 100%; min-width: 0; background: transparent; }
.cardtable thead { display: none; }
.cardtable tbody { display: block; width: 100%; }
.cardtable tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; padding: 10px 40px 10px 14px; min-height: 44px; box-shadow: var(--shadow-sm); }
.cardtable tr:hover { background: #fff; }
.cardtable td { display: block; flex: 1 1 100%; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 13.5px; }
.cardtable td.num, .cardtable td.center { text-align: left; } /* a labelled line reads left to right on a card (td.num is declared after this block) */
.cardtable td:empty { display: none; }
.cardtable td[data-label]::before { content: attr(data-label) ": "; font-weight: 800; color: var(--muted); margin-right: 4px; }
.cardtable td.cd-top, .cardtable td.cd-chip, .cardtable td.cd-sum { flex: 0 1 auto; font-size: 15px; }
.cardtable td.cd-top::before, .cardtable td.cd-chip::before, .cardtable td.cd-sum::before { content: none; }
.cardtable td.cd-top { order: -3; } .cardtable td.cd-chip { order: -2; } .cardtable td.cd-sum { order: -1; margin-left: auto; text-align: right; }
.cardtable tr:has(.row-link) { cursor: pointer; }
.cardtable tr:has(.row-link)::after { content: "›"; position: absolute; right: 14px; top: 9px; font-size: 26px; line-height: 1; color: var(--muted); } /* the chevron sits by the card's first line */
.cardtable .row-link { min-height: 0; margin: 0; padding: 0; position: static; }
.cardtable .row-link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } /* the whole card opens the record */
.cardtable tr:has(.row-link:focus-visible) { outline: 3px solid var(--teal-d); outline-offset: 2px; }
.cardtable .row-link:focus-visible { outline: none; box-shadow: none; }
.cardtable tbody tr:last-child { margin-bottom: 0; }
}
/* ---------- empty state (_Empty partial): what is here, and the ONE thing to do next ---------- */
.empty { text-align: center; padding: 26px 16px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 14px; background: #fff; }
.empty .ic { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.empty p { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
.empty .actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.form-grid label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 44px; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 700; }
.check input { width: 22px; height: 22px; }
.hours { display: grid; grid-template-columns: 110px 1fr 1fr 70px; gap: 8px; align-items: center; }
@media (max-width: 480px) { .hours { grid-template-columns: 1fr 1fr; } .hours .day { grid-column: 1 / -1; font-weight: 800; } }
.opt-list { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 640px) { .content { padding: 14px 16px 40px; } h1 { font-size: 20px; } }
td.num, th.num { text-align: right; white-space: nowrap; }
a.stat { color: var(--ink); text-decoration: none; } a.stat:hover { border-color: var(--teal); }
.btn { min-height: 44px; }
a.back { display: inline-flex; align-items: center; min-height: 44px; }
.mt12 { margin-top: 12px; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-end { display: flex; align-items: flex-end; }
.otp { font-size: 26px; font-weight: 800; letter-spacing: 2px; background: var(--teal-wash); border: 1px dashed var(--teal); border-radius: 12px; padding: 12px 16px; display: inline-block; user-select: all; }
.outlet-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 14px; margin-bottom: 12px; }
td.detail { font-family: ui-monospace, Consolas, monospace; font-size: 12px; max-width: 420px; word-break: break-word; }
.ticket { font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.35; background: #fffdf7; border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px 16px; max-width: 34ch; white-space: pre; overflow-x: auto; }
/* 2-step verification (Pages/Account, Pages/Login2fa) */
.stack { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin: 8px 0 4px; }
.stack .btn { align-self: flex-start; }
.steps { margin: 0 0 12px 18px; padding: 0; } .steps li { margin-bottom: 4px; }
.qr { display: block; width: 240px; height: 240px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: 4px 0 10px; }
.card-accent { border: 2px solid var(--gold); }
.recovery-codes { columns: 2; column-gap: 24px; margin: 8px 0 14px 18px; padding: 0; font-size: 16px; }
.recovery-codes li { margin-bottom: 6px; } .recovery-codes code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 1px; user-select: all; }
.code-input { font-size: 22px; letter-spacing: 4px; text-align: center; }
details.recovery { margin: 10px 0; } details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--muted); }
@media (max-width: 420px) { .recovery-codes { columns: 1; } }
|