…
.kpi-band--compact smaller figures and padding (a list's totals, a second,
quieter row under the main band)
Columns: as many as fit at ≥ 13 rem (--compact 11 rem); 2 on phones. */
.kpi-band {
--_kb-min: 13rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_kb-min)), 1fr));
overflow: hidden;
border: 1px solid var(--e-border);
border-radius: var(--r-lg);
background: var(--e-raised);
box-shadow: var(--shadow-1);
}
.kpi-band > .kpi {
border: 0;
border-radius: 0;
background: transparent;
/* hairline on the left and top edges; the band's overflow hides the outer ones */
box-shadow: -1px 0 0 var(--e-border), 0 -1px 0 var(--e-border);
padding: var(--sp-4) var(--sp-5);
}
.kpi-band > a.kpi:hover {
background: var(--e-subtle);
}
.kpi-band > a.kpi:focus-visible {
outline-offset: -3px;
}
.kpi-band--compact {
--_kb-min: 11rem;
}
.kpi-band--compact > .kpi {
gap: 2px;
padding: var(--sp-3) var(--sp-4);
}
/* the quieter row: exact figures one step down (a list's totals, the
dashboard's P&L and statutory row) — the band above keeps the display size.
20 px holds down to a ~190 px tile (160 px of content: the dashboard's five
tiles at 1366); then 16, then 14 px. */
.kpi-band--compact .kpi__value {
font-size: var(--fs-xl);
}
@container kpi (max-width: 159.98px) {
.kpi-band--compact .kpi__value {
font-size: var(--fs-lg);
}
}
@container kpi (max-width: 139.98px) {
.kpi-band--compact .kpi__value {
font-size: var(--fs-md);
}
}
.kpi-band--compact .kpi__list {
margin-top: var(--sp-1);
padding-top: var(--sp-1);
}
/* the compact tiles keep label | figure side by side down to a 150 px tile
(the dashboard's five tiles at 1366 are ~176 px): a long label wraps
beside its right-aligned figure, so parts line up like a ledger */
@container kpi (min-width: 150px) and (max-width: 199.98px) {
.kpi-band--compact .kpi__list {
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px var(--sp-2);
}
.kpi-band--compact .kpi__list dd {
margin-bottom: 0;
text-align: right;
}
}
@container main (max-width: 639.98px) {
.kpi-band {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kpi-band > .kpi {
padding: var(--sp-3);
}
/* an odd last tile takes the whole row instead of half of it */
.kpi-band > .kpi:last-child:nth-child(odd of .kpi) {
grid-column: 1 / -1;
}
/* a list's band folds to one summary line of its two key figures on phones:
mark those two .kpi--key; the others hide (their figures are in the list) */
.kpi-band:has(> .kpi--key) > .kpi:not(.kpi--key) {
display: none;
}
.kpi-band:has(> .kpi--key) > .kpi--key .kpi__meta {
display: none;
}
/* …and "odd" counts the key tiles only: hidden tiles before them must not
push the last key tile onto a row of its own */
.kpi-band:has(> .kpi--key) > .kpi:last-child:nth-child(odd of .kpi) {
grid-column: auto;
}
.kpi-band:has(> .kpi--key) > .kpi--key:last-child:nth-child(odd of .kpi--key) {
grid-column: 1 / -1;
}
}
/* ── 7 · table ──────────────────────────────────────────────────────────── */
/* Wrap every data table. If it can scroll, give it tabindex="0", role="region"
and an aria-label so keyboard users can scroll it. --sticky caps its height
so the header row sticks while rows scroll. */
.table-wrap {
position: relative;
width: 100%;
max-width: 100%;
overflow: auto;
border: 1px solid var(--e-border);
border-radius: var(--r-lg);
/* Scroll cue (functional, not decoration): an edge shadow appears only on
the side that has more columns; covers slide over it with the content. */
background:
linear-gradient(to right, var(--e-raised) 40%, transparent) left / 32px 100% no-repeat local,
linear-gradient(to left, var(--e-raised) 40%, transparent) right / 32px 100% no-repeat local,
linear-gradient(to right, color-mix(in srgb, var(--e-fg) 14%, transparent), transparent) left / 12px 100% no-repeat scroll,
linear-gradient(to left, color-mix(in srgb, var(--e-fg) 14%, transparent), transparent) right / 12px 100% no-repeat scroll,
var(--e-raised);
overscroll-behavior-x: contain;
}
.table-wrap--sticky {
max-height: min(70vh, 720px);
}
.table-wrap:focus-visible {
outline-offset: -2px;
}
.table {
width: 100%;
color: var(--e-fg);
font-size: var(--fs-md);
line-height: var(--lh-snug);
font-variant-numeric: tabular-nums;
}
.table caption {
padding: var(--sp-3) var(--sp-4);
color: var(--e-muted);
font-size: var(--fs-sm);
text-align: left;
caption-side: top;
}
/* Cells do not wrap: dates, amounts and codes stay on one line and the
.table-wrap scrolls instead. Opt a free-text column in with .wrap. */
.table th,
.table td {
padding: 10px 12px;
border-bottom: 1px solid var(--e-border);
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
.table .wrap {
min-width: 14rem;
white-space: normal;
}
/* phones: a free-text column may not claim 62% of the screen */
@container main (max-width: 639.98px) {
.table .wrap {
min-width: 8.5rem;
}
}
.table th:first-child,
.table td:first-child {
padding-left: var(--sp-4);
}
.table th:last-child,
.table td:last-child {
padding-right: var(--sp-4);
}
.table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--e-surface);
border-bottom-color: color-mix(in srgb, var(--e-fg) 16%, transparent);
color: var(--e-muted);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1.2;
white-space: nowrap;
}
.table thead th a {
color: inherit;
text-decoration: none;
}
.table thead th a:hover {
color: var(--e-fg);
}
.table thead th[aria-sort] {
color: var(--e-fg);
}
.table tbody th {
font-weight: var(--fw-semibold);
}
.table tbody tr {
transition: background-color var(--dur-fast) var(--ease-out);
}
.table tbody tr:last-child > * {
border-bottom: 0;
}
.table--zebra tbody tr:nth-child(even) {
background: var(--e-subtle);
}
.table tbody tr:hover {
background: color-mix(in srgb, var(--e-primary-soft) 60%, var(--e-raised));
}
.table tbody tr[aria-selected="true"],
.table tbody tr.is-selected {
background: var(--e-primary-soft);
}
.table tbody tr[aria-selected="true"] > :first-child,
.table tbody tr.is-selected > :first-child {
box-shadow: inset 3px 0 0 var(--e-primary);
}
.table tbody tr[data-href] {
cursor: pointer;
}
.table a {
color: var(--e-primary-dark);
font-weight: var(--fw-semibold);
text-decoration: none;
}
.table a:hover {
text-decoration: underline;
}
.table .num {
text-align: right;
white-space: nowrap;
}
/* A code COLUMN is plain mono text, not a chip per cell. :where() keeps this
at (0,1,1), under the priority-column (.table .col-mid / .col-wide) and the
phone-record (.table--records tr > *) hiding, so a code column folds away
like any other column (G02 bug report). It still beats the .code chip. */
:where(.table) td.code,
:where(.table) th.code {
display: table-cell;
border: 0;
border-bottom: 1px solid var(--e-border);
border-radius: 0;
background: transparent;
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.01em;
line-height: inherit;
white-space: nowrap;
}
/* a sub-line under a code (the date under an invoice no.) reads in the UI face,
and so does a plain word in a code column ("Unregistered", "No SKU"):
Unregistered
*/
.table td.code small,
.table td.code .cell-sub,
.table td.code .text-ui {
font-family: var(--font-ui);
letter-spacing: normal;
}
/* Green-primary themes (Dark Professional #10B981, Emerald Business): the theme
colour is the hue family of Paid (--e-ok). In a table, a document link reads
in ink with a theme-colour underline, so in a status list green means Paid
and nothing else (03-brand §6.3, the recorded exception). The same holds for
a master list's record link in its name column (td[data-col="party"] > a:
customer, vendor, item), next to Active / Inactive badges. */
:is([data-theme="dark-pro"], [data-theme="emerald"]) .table td.code a,
:is([data-theme="dark-pro"], [data-theme="emerald"]) .table td a.code,
:is([data-theme="dark-pro"], [data-theme="emerald"]) .table td[data-col="party"] > a {
color: var(--e-fg);
text-decoration: underline;
text-decoration-color: var(--e-primary);
text-decoration-thickness: 1.5px;
text-underline-offset: 0.2em;
}
.table tbody tr:last-child > .code {
border-bottom: 0;
}
.table tfoot .code {
border-top: 1px solid color-mix(in srgb, var(--e-fg) 30%, transparent);
}
.table .actions {
width: 1%;
text-align: right;
white-space: nowrap;
}
.table .actions > * + * {
margin-left: var(--sp-1);
}
.table td.actions .btn {
vertical-align: middle;
}
/* a bar inside a cell (share of total, utilisation) keeps a readable length */
.table td > .progress {
min-width: 4.5rem;
}
/* a bar under its own figure (a share column: "88.3%" then the bar) */
.table td > .progress:not(:first-child) {
margin-top: 3px;
}
.table .check {
width: 1%;
padding-right: 0;
}
/* Secondary line inside a cell: party GSTIN, item SKU, due date… */
.table td small,
.table td .cell-sub,
.table tbody th small,
.table tfoot th small {
display: block;
margin-top: 2px;
color: var(--e-muted);
font-size: var(--fs-xs);
font-weight: var(--fw-regular);
}
.table tfoot th,
.table tfoot td {
border-top: 1px solid color-mix(in srgb, var(--e-fg) 30%, transparent);
border-bottom: 0;
background: var(--e-subtle);
font-weight: var(--fw-semibold);
}
.table tfoot tr:last-child > * {
border-bottom: 3px double color-mix(in srgb, var(--e-fg) 30%, transparent);
}
.table--dense {
font-size: var(--fs-sm);
}
/* 32 px rows for single-line cells (5 + 20 badge / 17 text + 5 + hairline);
a row with a sub-line grows to about 46 px, so dense lists keep sub-lines for
the narrower tiers (.sub-narrow / .sub-mid) and single lines at 1366. */
.table--dense th,
.table--dense td {
padding: 5px 10px;
}
.table--dense .badge {
height: 20px;
}
.table--dense td.code,
.table--dense th.code {
font-size: 0.75rem;
}
/* a record list's party name stays on one line with its exception tag (Bill
of Supply, IGST) so dense rows stay 32 px; it may take a second line only
when the page is narrower than the table's columns (tablets) */
.table--records td[data-col="party"] {
white-space: nowrap;
}
@container main (max-width: 1099.98px) {
.table--records td[data-col="party"] {
white-space: normal;
}
}
/* …unless it is a free-text particulars column (a stock movement's "Purchase
bill … from …"): td.wrap[data-col="party"] wraps at every width */
.table--records td.wrap[data-col="party"] {
white-space: normal;
}
/* ext: a two-word head over a short figure ("Kolkata HQ", "Purchase (₹)")
takes two lines so the column stays as narrow as its figures. Unlike .wrap
it sets no min-width.
Kolkata HQ
*/
.table thead th.th-wrap {
white-space: normal;
}
/* an exception tag inside a dense cell: 18 px, so it never sets the row height */
.table--dense td .tag {
height: 18px;
padding-inline: 5px;
vertical-align: 1px;
}
/* the row-actions button of a dense list: 24 px, so it never sets the row height */
.table--dense td.actions {
padding-block: 4px;
}
.table--dense td.actions .btn--icon.btn--sm {
--btn-h: 24px;
width: 24px;
min-width: 24px;
}
.table--dense th:first-child,
.table--dense td:first-child {
padding-left: var(--sp-3);
}
.table--dense th:last-child,
.table--dense td:last-child {
padding-right: var(--sp-3);
}
/* ext: stack rows into label/value cards on phones (<640px).
Give each
a data-label="Column name". */
@media (max-width: 639.98px) {
.table--stack thead {
display: block; /* a row group ignores overflow: block, so the 1 px box clips its cells */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.table--stack,
.table--stack tbody,
.table--stack tr,
.table--stack td,
.table--stack tfoot {
display: block;
width: 100%;
}
.table--stack tr {
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--e-border);
}
.table--stack tbody tr:last-child {
border-bottom: 0;
}
.table--stack td,
.table--stack td.code,
.table--stack td:first-child,
.table--stack td:last-child {
display: flex;
justify-content: space-between;
gap: var(--sp-4);
padding: 4px var(--sp-4);
border: 0;
text-align: right;
}
/* a cell's sub-lines (GSTIN, stock after sale, CGST/SGST) sit on their own
right-aligned lines under the value, not beside it */
.table--stack td {
flex-wrap: wrap;
align-items: baseline;
}
.table--stack td > small,
.table--stack td > .cell-sub {
flex-basis: 100%;
text-align: right;
}
.table--stack td[data-label]::before {
content: attr(data-label);
color: var(--e-muted);
font-family: var(--font-ui);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
letter-spacing: normal;
text-align: left;
}
.table--stack td.actions {
width: auto;
justify-content: flex-end;
}
.table--stack tbody tr[aria-selected="true"] > :first-child {
box-shadow: none;
}
.table--stack tfoot tr > *,
.table--stack tfoot tr:last-child > * {
display: flex;
justify-content: space-between;
border: 0;
}
/* the footer's priority cells fold like the body's (a phone never shows
the CGST / SGST columns or their label cell) */
.table--stack tfoot tr > :is(.col-wide, .col-mid) {
display: none;
}
}
/* ext: read-only document lines (a saved invoice, quotation, note, purchase):
with cells
td[data-col=line|item|qty|rate|disc|taxable|tax|amount]. On phones a line
reads as the item name (title) · "60 Boxes × ₹185.00" with the amount on the
right · GST as a sub-line — not a six-row label/value card. The foot is one
label + total row. Editors use .table--entry instead. */
@media (max-width: 639.98px) {
.table--stack.table--lines tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); row-gap: 2px; padding: var(--sp-3) var(--sp-4); }
.table--stack.table--lines tbody td { display: block; width: auto; padding: 0; text-align: left; }
.table--stack.table--lines tbody td::before { content: none; }
.table--stack.table--lines .col-wide,
.table--stack.table--lines [data-col="taxable"],
.table--stack.table--lines [data-col="disc"] { display: none; }
.table--stack.table--lines tfoot tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--e-subtle); border-top: 1px solid color-mix(in srgb, var(--e-fg) 30%, transparent); }
.table--stack.table--lines tfoot tr > :not(.col-wide):not([data-col="taxable"]) { display: block; width: auto; padding: 0; border: 0; background: none; }
.table--stack.table--lines tbody [data-col="line"] { flex: 0 0 1.25rem; color: var(--e-muted); }
.table--stack.table--lines tbody [data-col="item"] { flex: 1 0 calc(100% - 1.25rem - var(--sp-2)); min-width: 0; font-weight: var(--fw-semibold); }
.table--stack.table--lines tbody [data-col="item"] > small { display: block; text-align: left; font-weight: var(--fw-regular); }
.table--stack.table--lines tbody [data-col="qty"] { margin-inline-start: calc(1.25rem + var(--sp-2)); }
.table--stack.table--lines tbody [data-col="rate"]::before { content: "× ₹"; color: var(--e-muted); }
.table--stack.table--lines tbody [data-col="rate"] > small { display: inline; margin-inline-start: var(--sp-1); }
.table--stack.table--lines [data-col="amount"] { margin-inline-start: auto; text-align: right; }
.table--stack.table--lines [data-col="amount"]::before { content: "₹"; }
.table--stack.table--lines [data-col="amount"] > small { display: block; text-align: right; font-weight: var(--fw-regular); }
.table--stack.table--lines [data-col="tax"]:not(.col-wide) { order: 9; flex: 1 0 100%; text-align: right; color: var(--e-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.table--stack.table--lines [data-col="tax"]:not(.col-wide)::before { content: attr(data-label) " "; }
}
/* ext: record rows on phones (< 640 px of page width) — the list pattern.
A desktop list table becomes one three-line record per row, no sideways
scroll. Mark the cells a phone shows with data-col; every other cell hides:
line 1 data-col="no" (document number) · data-col="status" · data-col="actions" (the ⋯ menu)
line 2 data-col="party" (customer / vendor) + its exception tag
line 3 data-col="date" · data-col="due" · data-col="amount" (bold, right)
The amount reads "₹2,192.00 due": ₹ is added, data-note="due" names it. A
paid document puts data-col="amount" data-note="paid" on its TOTAL cell
("₹1,035.00 paid", ok-fg), never a bare 0.00.
tfoot: a phone-only label cell th.sub-phone[data-col="label"] that names
the figure ("Outstanding · 240 invoices") and data-col="amount". Sub-lines
(.sub-narrow / .sub-mid, party GSTIN) hide: the record shows their facts. */
.table .sub-phone {
display: none;
}
@container main (max-width: 639.98px) {
.table--records thead {
display: block;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.table--records,
.table--records tbody,
.table--records tfoot {
display: block;
width: 100%;
}
.table--records tr {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas:
"no no status act"
"party party party act"
"date due amount act";
align-items: center;
gap: 2px var(--sp-2);
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--e-border);
}
.table--records tbody tr:last-child {
border-bottom: 0;
}
.table--records tr > * {
display: none;
padding: 0 !important;
border: 0 !important;
}
.table--records tr > [data-col] {
display: block;
min-width: 0;
}
.table--records [data-col="no"] { grid-area: no; }
.table--records [data-col="status"] { grid-area: status; justify-self: end; }
.table--records [data-col="actions"] { grid-area: act; align-self: start; margin: -4px -8px 0 0; }
.table--records [data-col="actions"] .btn--icon.btn--sm.btn--sm { --btn-h: 36px; width: 36px; min-width: 36px; } /* touch */
.table--records [data-col="party"] { grid-area: party; white-space: normal; font-weight: var(--fw-medium); }
.table--records [data-col="date"] { grid-area: date; color: var(--e-muted); font-size: var(--fs-xs); }
.table--records [data-col="due"] { grid-area: due; font-size: var(--fs-xs); }
.table--records [data-col="date"] + [data-col="due"]::before,
.table--records [data-col="date"] ~ [data-col="due"]::before { content: "· "; color: var(--e-muted); }
.table--records [data-col="amount"] { grid-area: amount; justify-self: end; font-weight: var(--fw-bold); }
.table--records :is(.sub-narrow, .sub-mid),
.table--records [data-col="party"] small,
.table--records [data-col="amount"] small {
display: none !important;
}
/* an exception tag (IGST, Bill of Supply) stays beside the party name */
.table--records td[data-col="party"] .sub-narrow:has(> .tag) {
display: inline !important;
}
/* with no column heads, every figure carries its unit and its meaning:
₹ in front, and data-note after it ("due" on an outstanding balance;
a paid document shows its total with data-note="paid", in ok-fg) */
.table--records tbody [data-col="amount"]::before {
content: "₹";
}
.table--records tbody [data-col="amount"][data-note]::after {
content: " " attr(data-note);
font-weight: var(--fw-regular);
color: var(--e-muted);
font-size: var(--fs-xs);
}
.table--records tbody [data-col="amount"][data-note="paid"],
.table--records tbody [data-col="amount"][data-note="paid"]::after {
color: var(--e-ok-fg);
}
.table--records [data-col="due"] small {
display: inline;
margin: 0;
font-size: inherit;
}
.table--records tfoot tr {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label amount";
background: var(--e-subtle);
}
.table--records tfoot [data-col="label"] { grid-area: label; white-space: normal; }
.table--records tfoot [data-col="label"] small { display: block !important; }
/* a second figure on the record (the overdue part of a balance) names
itself too: data-note on its date / due cell, and ₹ before its .money
37,406.00
*/
.table--records tbody td[data-col]:not([data-col="amount"])[data-note] .money::before {
content: "₹";
}
.table--records tbody td[data-col]:not([data-col="amount"])[data-note]::after {
content: " " attr(data-note);
color: var(--e-muted);
}
/* .table--qty: the record's figure is a quantity (stock, movements), not ₹ */
.table--records.table--qty tbody [data-col="amount"]::before {
content: none;
}
/* .table--by-name: a master list (customers, vendors, items, users) is
scanned by name and balance — line 1 the name with its exception tags,
line 2 the GSTIN / HSN as a muted code beside the bold figure, line 3 the
overdue figure or the price */
.table--records.table--by-name tbody tr {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "party party act" "no amount act" "date date act";
}
.table--records.table--by-name tbody td[data-col="no"] { color: var(--e-muted); font-size: var(--fs-xs); align-self: baseline; }
.table--records.table--by-name tbody td[data-col="amount"] { align-self: baseline; }
.table--records.table--by-name tbody td[data-col="date"] { font-size: var(--fs-xs); }
/* .table--two-line: a ledger-like record (a stock card, purchase history,
a passbook) — two lines, the label and its date, beside ONE bold figure */
.table--records.table--two-line tbody tr {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "party amount" "date amount";
padding-block: 6px;
line-height: 1.25;
}
.table--records.table--two-line tbody [data-col="amount"] { align-self: center; }
.table--records.table--two-line tbody td.code[data-col="party"] { font-weight: var(--fw-regular); }
.table--records.table--two-line tbody [data-col="date"] { color: var(--e-muted); }
}
/* ── 8 · badge · chip · tag · code · money · kbd ────────────────────────── */
.badge {
--_b-bg: var(--e-surface);
--_b-fg: var(--e-muted);
--_b-dot: var(--e-faint);
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: var(--_b-bg);
color: var(--_b-fg);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.badge::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--_b-dot);
}
/* Colour meaning follows docs/design/03-brand.md §6.3:
green Paid/Approved/Active/Converted · amber Partially Paid/Trial/Follow-up ·
red Unpaid/Overdue/Suspended/Rejected · blue Sent/info ·
neutral Draft/Cancelled/Expired/Inactive. The text always names the status. */
/* settled / positive */
.badge--paid,
.badge--approved,
.badge--active,
.badge--converted {
--_b-bg: var(--e-ok-soft);
--_b-fg: var(--e-ok-fg);
--_b-dot: var(--e-ok);
}
/* converted has moved on to the next document: arrow instead of dot */
.badge--converted::before {
width: 7px;
height: 8px;
border-radius: 0;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* in between / on the clock */
.badge--partial,
.badge--trial {
--_b-bg: var(--e-warn-soft);
--_b-fg: var(--e-warn-fg);
--_b-dot: var(--e-warn);
}
/* owed / refused / blocked */
.badge--unpaid,
.badge--rejected,
.badge--suspended {
--_b-bg: var(--e-err-soft);
--_b-fg: var(--e-err-fg);
--_b-dot: var(--e-err);
}
/* Past due is louder than owed: inverse (solid), so it is distinct without
colour. It is the ONE past-due cue (03-brand §6.3): every invoice or bill
past its due date with a balance keeps its SRS status word on the inverse
red — .badge--unpaid.is-overdue / .badge--partial.is-overdue — with a
visually-hidden "Overdue, " first, and the due cell (or sub-line) reads
"Overdue by n days" in .overdue-note. Past-due rows then differ only by the
Unpaid / Partially Paid word, and never by how late or how big they are.
Overdue, Partially Paid
.badge--overdue ("Overdue" alone) is for filters, counts and legends. */
.badge--overdue,
.badge.is-overdue {
--_b-bg: var(--e-err-fg);
--_b-fg: var(--e-raised);
--_b-dot: var(--e-raised);
}
.badge + .badge {
margin-left: 4px;
}
/* ext: the past-due sub-line / due cell text */
.overdue-note,
.table td .overdue-note,
.table td small.overdue-note {
color: var(--e-err-fg);
font-weight: var(--fw-semibold);
}
/* informational / in flight */
.badge--sent,
.badge--info {
--_b-bg: var(--e-info-soft);
--_b-fg: var(--e-info-fg);
--_b-dot: var(--e-info);
}
/* unfinished: dashed outline, no fill */
.badge--draft {
--_b-bg: transparent;
--_b-fg: var(--e-muted);
--_b-dot: transparent;
border: 1px dashed var(--e-border-strong);
}
.badge--draft::before {
box-shadow: inset 0 0 0 1.5px var(--e-faint);
}
/* void / lapsed / dormant: hollow dot */
.badge--cancelled,
.badge--expired,
.badge--inactive {
--_b-dot: transparent;
}
.badge--cancelled::before,
.badge--expired::before,
.badge--inactive::before {
box-shadow: inset 0 0 0 1.5px var(--e-faint);
}
.badge--neutral {
--_b-dot: var(--e-faint);
}
/* ext: count badge without a dot (tab counts, nav counters) */
.badge--count::before {
display: none;
}
.badge--count {
min-width: 20px;
height: 18px;
padding: 0 6px;
justify-content: center;
border-radius: var(--r-full);
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--e-fg) 18%, transparent);
border-radius: var(--r-full);
background: var(--e-raised);
color: var(--e-fg);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
a.chip:hover,
button.chip:hover,
label.chip:hover {
border-color: color-mix(in srgb, var(--e-fg) 36%, transparent);
background: var(--e-subtle);
color: var(--e-fg);
}
.chip[aria-pressed="true"],
.chip[aria-current],
.chip.is-active,
label.chip:has(> input:checked) {
border-color: var(--e-primary);
background: var(--e-primary-soft);
color: var(--e-primary-dark);
}
label.chip {
position: relative;
cursor: pointer;
}
label.chip > input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
label.chip:has(> input:focus-visible) {
outline: 2px solid var(--e-focus);
outline-offset: 2px;
}
.chip__count {
color: var(--e-muted);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
}
.chip__remove {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
margin-right: -4px;
border-radius: 50%;
color: var(--e-muted);
text-decoration: none;
}
.chip__remove:hover {
background: var(--e-surface);
color: var(--e-fg);
}
.chip__remove .icon {
width: 12px;
height: 12px;
vertical-align: 0;
}
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 6px;
border: 1px solid var(--e-border);
border-radius: var(--r-sm);
background: var(--e-surface);
color: var(--e-muted);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
/* an exception fact on a record (Over limit, Low stock): the tag stays
neutral and only its leading icon takes the warning colour
{{icon triangle-alert icon--sm}}Over limit */
.tag--warn > .icon {
color: var(--e-warn-fg);
}
.tag--primary {
border-color: color-mix(in srgb, var(--e-primary) 30%, transparent);
background: var(--e-primary-soft);
color: var(--e-primary-dark);
}
.code {
display: inline-block;
padding: 1px 6px;
border: 1px solid var(--e-border);
border-radius: var(--r-sm);
background: var(--e-subtle);
color: var(--e-fg);
font-family: var(--font-mono);
font-size: max(12px, 0.8125em); /* never below the 12 px screen floor (04 §3.1) */
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.45;
white-space: nowrap;
font-variant-ligatures: none;
vertical-align: baseline;
}
/* in a feed of facts (activity, today so far) a code is read, not copied:
tint only, no box — the bordered chip stays for copy targets */
.timeline .code,
.dl--stack .code {
padding-inline: 4px;
border-color: transparent;
}
a.code {
color: var(--e-primary-dark);
text-decoration: none;
}
a.code:hover {
border-color: var(--e-primary);
}
.money {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
white-space: nowrap;
}
.money--neg {
color: var(--e-err-fg);
}
/* Dr / Cr suffix is generated — write only the amount. */
.money--dr::after,
.money--cr::after {
margin-left: 0.3em;
color: var(--e-muted);
font-size: 0.86em;
font-weight: var(--fw-semibold);
}
.money--dr::after {
content: "Dr";
}
.money--cr::after {
content: "Cr";
}
.kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border: 1px solid color-mix(in srgb, var(--e-fg) 22%, transparent);
border-bottom-width: 2px;
border-radius: var(--r-sm);
background: var(--e-raised);
color: var(--e-muted);
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
line-height: 1;
white-space: nowrap;
vertical-align: 1px;
}
/* ── 9 · tabs ───────────────────────────────────────────────────────────── */
.tabs {
display: flex;
gap: var(--sp-5);
overflow-x: auto;
border-bottom: 1px solid var(--e-border);
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
margin-bottom: -1px;
padding: 10px 2px 9px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--e-muted);
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.tab:hover {
border-bottom-color: color-mix(in srgb, var(--e-fg) 24%, transparent);
color: var(--e-fg);
}
.tab[aria-selected="true"],
.tab[aria-current="page"],
.tab[aria-current="true"] {
border-bottom-color: var(--e-primary);
color: var(--e-fg);
}
.tab:focus-visible {
outline-offset: -2px;
border-radius: var(--r-sm) var(--r-sm) 0 0;
}
/* ── 10 · dialog · drawer ───────────────────────────────────────────────── */
/*