No invoices yet
Create one to get started.
`.empty-inline` switches to a left-aligned, tighter layout for in-card
placeholders (vs the default centered page/section empty). */
.empty-glyph {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
margin: 0 auto 12px;
border-radius: var(--radius-pill);
background: var(--color-info-tint);
color: var(--color-primary);
}
.empty-glyph svg { width: 24px; height: 24px; }
.empty-title {
font-family: var(--font-display);
font-size: 17px; font-weight: 600;
color: var(--color-ink);
margin: 0 0 6px;
}
.empty-sub {
font-size: 13px; letter-spacing: -0.2px;
color: var(--color-ink-muted-48);
margin: 0 0 16px;
}
.empty-inline { padding: 12px 2px; text-align: left; }
.empty-inline .empty-glyph { margin-left: 0; margin-right: 0; }
/* In-card empty modifiers: `.is-centered` centers the muted line; `.is-italic`
matches the italic prompt-state used by some pickers/legends. Compose:
No matches.
*/
.empty-inline.is-centered { text-align: center; }
.empty-inline.is-italic { font-style: italic; }
/* Small-input size modifier */
.inp-sm, .sel.inp-sm, .input.inp-sm {
height: 30px;
padding: 0 10px;
font-size: 12px;
}
/* When .toolbar contains a primary action group at the end */
.toolbar > .grow { flex: 1 1 auto; min-width: 0; }
.toolbar > .spacer { flex: 1 1 auto; }
/* ═══════════════════════════════════════════════════════════════════════════
FORMS — field grids used by Owner/Pet/Inventory/Estimate forms.
═══════════════════════════════════════════════════════════════════════════ */
/* Vertical stack of form cards. Canonical container for any OwnerForm /
PetForm / Registration / settings-form sibling chain of `.card` elements.
Owns the between-card gap so per-form scoped `*-card-stack` margin shims
should be retired in favour of wrapping the cards in `.form-stack`. */
.form-stack {
display: flex;
flex-direction: column;
gap: var(--form-card-gap);
}
.fields {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
}
.field {
flex: 1 1 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 0;
}
.field-half { flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px); }
.field-third { flex: 1 1 calc(33.333% - 11px); max-width: calc(33.333% - 11px); }
.field-quarter { flex: 1 1 calc(25% - 12px); max-width: calc(25% - 12px); }
.field-sixth { flex: 1 1 calc(16.666% - 14px); max-width: calc(16.666% - 14px); }
.field .optional {
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--color-ink-muted-48);
margin-left: 6px;
}
@media (max-width: 768px) {
.field-half,
.field-third,
.field-quarter,
.field-sixth { flex: 1 1 100%; max-width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CARDS — sub-section pieces (footer, section header).
═══════════════════════════════════════════════════════════════════════════ */
.card-section {
padding: 18px 0;
border-top: 1px solid var(--color-divider-soft);
}
.card-section:first-child {
padding-top: 0;
border-top: 0;
}
.card-section + .card-section { padding-bottom: 0; }
.card-footer {
margin: 0 -20px -20px;
padding: 14px 20px;
background: var(--color-canvas);
border: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 16px;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.card-footer .list-pgn {
flex: 1;
padding-top: 0;
padding-bottom: 0;
}
.range-label {
font-size: 12px;
color: var(--color-ink-muted-48);
letter-spacing: -0.12px;
white-space: nowrap;
align-self: flex-end;
padding-bottom: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
BANNERS (alias of .banner-success/-warning/-danger above)
═══════════════════════════════════════════════════════════════════════════ */
.banner {
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
padding: 12px 16px;
margin-bottom: 14px;
font-size: 13px;
letter-spacing: -0.2px;
color: var(--color-ink);
background: #fff;
}
.banner-info,
.banner.banner-info {
background: var(--color-info-tint);
border-color: rgba(0, 102, 204, 0.22);
color: var(--color-primary);
}
.banner-danger,
.banner.banner-danger {
background: var(--color-danger-tint);
border-color: rgba(193, 18, 31, 0.24);
color: var(--color-danger);
}
.banner-warning,
.banner.banner-warning {
background: var(--color-warning-tint);
border-color: rgba(178, 93, 0, 0.24);
color: var(--color-warning);
}
/* ═══════════════════════════════════════════════════════════════════════════
BREADCRUMBS, CLICKABLE ROWS, EXTRA SIZES.
═══════════════════════════════════════════════════════════════════════════ */
/* Breadcrumb. Two placement variants:
• `.page-crumb` — top-level utility. Use on detail pages that do NOT have
a `.page-header` (e.g. when an identity card replaces the header).
• `.crumb` — nested form. Use inside `.page-header > div` on pages that do
have a header. Visually identical to `.page-crumb`; the extra rule below
adds breathing room before the page title.
Either form must come first inside its container so the spacing rules
compose with surrounding utilities. */
.crumb,
.page-crumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-ink-muted-48);
letter-spacing: -0.12px;
margin-bottom: 6px;
}
.page-crumb { margin-bottom: 12px; }
.crumb a,
.page-crumb a {
color: var(--color-ink-muted-48);
text-decoration: none;
}
.crumb a:hover,
.page-crumb a:hover { color: var(--color-primary); text-decoration: underline; }
.crumb-sep {
color: var(--color-ink-muted-48);
opacity: 0.5;
}
/* Sticky form footer — primary save / cancel pair pinned to the bottom of
long forms. Mirrors the elevated card surface so it reads as the "what
happens next" affordance even when the form scrolls. Used by OwnerForm,
PetForm, and the ConsultationEditor `.ce-footer` (kept as a local alias
while the editor's two-pane shell still differs). */
.form-footer {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 14px 18px;
margin: 18px 0 0;
background: var(--color-canvas);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-product);
}
.form-footer .form-footer-left { margin-right: auto; }
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: var(--color-canvas-parchment); }
.row-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
color: var(--color-ink-muted-48);
}
.btn.btn-xs, .btn-xs { height: 22px; padding: 0 8px; font-size: 11px; }
.pg-lbl {
font-size: 12px;
color: var(--color-ink-muted-48);
letter-spacing: -0.12px;
padding: 0 8px;
}
/* Stepper — `step-num`/`step-bar`/`step-label` BEM aliases (Registration page) */
.stepper .step-num,
.step-num {
width: 22px; height: 22px;
border-radius: var(--radius-pill);
background: var(--color-canvas-parchment);
border: 1px solid var(--color-hairline);
color: var(--color-ink-muted-48);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600;
}
.step.active .step-num,
.stepper .step.active .step-num {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.step-bar {
flex: 0 0 48px;
height: 1px;
background: var(--color-hairline);
}
.step-label {
font-size: 13px;
letter-spacing: -0.2px;
color: var(--color-ink-muted-48);
}
.step.active .step-label,
.stepper .step.active .step-label {
color: var(--color-ink);
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════════
STATUS BUTTONS + INFO GRID + MODAL BACKDROP
═══════════════════════════════════════════════════════════════════════════ */
.btn-success,
.btn.btn-success {
background: var(--color-success);
color: #fff;
border: 1px solid var(--color-success);
border-radius: var(--radius-pill);
padding: 0 18px;
height: 32px;
font-size: 13px;
}
.btn-success:hover, .btn.btn-success:hover { background: #176c46; border-color: #176c46; color: #fff; }
.btn-warning,
.btn.btn-warning {
background: var(--color-warning);
color: #fff;
border: 1px solid var(--color-warning);
border-radius: var(--radius-pill);
padding: 0 18px;
height: 32px;
font-size: 13px;
}
.btn-warning:hover, .btn.btn-warning:hover { background: #8c4900; border-color: #8c4900; color: #fff; }
/* Banner alias */
.banner-warn { background: var(--color-warning-tint); border-color: rgba(178,93,0,0.24); color: var(--color-warning); }
.banner-success { background: var(--color-success-tint); border-color: rgba(31,138,91,0.22); color: var(--color-success); }
/* Detail-page info grid (Owner/Pet/Invoice/Estimate detail headers) */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.info-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--color-ink-muted-48);
margin-bottom: 4px;
}
.info-value {
font-size: 14px;
letter-spacing: -0.1px;
color: var(--color-ink);
}
/* Modal backdrop (Bootstrap class) — when client-side modals use this */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1040;
}
.modal-backdrop.show { opacity: 1; }
/* Generic flex utilities */
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
x-btn (× close), .ta (textarea alias), .tabs (tab strip)
═══════════════════════════════════════════════════════════════════════════ */
.x-btn {
width: 28px; height: 28px;
border: 1px solid transparent;
background: transparent;
border-radius: 7px;
color: var(--color-ink-muted-48);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
}
.x-btn:hover { background: var(--color-canvas-parchment); border-color: var(--color-hairline); color: var(--color-ink); }
.x-btn:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }
.ta {
width: 100%;
min-height: 80px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--color-hairline);
border-radius: var(--radius-sm);
font-family: var(--font-text);
font-size: 13px;
letter-spacing: -0.2px;
color: var(--color-ink);
outline: none;
resize: vertical;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ta:focus {
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--color-hairline);
margin-bottom: 16px;
}
.tabs .tab,
.tabs > a,
.tabs > button {
display: inline-flex;
align-items: center;
padding: 10px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--color-ink-muted-48);
cursor: pointer;
text-decoration: none;
margin-bottom: -1px;
}
.tabs .tab.active,
.tabs > a.active,
.tabs > button.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: 600;
}
.tabs .tab:hover,
.tabs > a:hover,
.tabs > button:hover { color: var(--color-ink); }
/* Segmented control — recessed parchment track with a flat white active pill.
Interactive; prefer the