/* Shared base for the three web apps (customer, vet, admin).
Linked after shared.css and before each app's own main.css:
It carries the default (tenant-themable) palette, the surface design
tokens, and every structural rule the web apps share. An app's main.css
only keeps its palette overrides and its own components.
Visual language mirrors the mobile app (apps/app-ui): soft shadow cards
instead of hard borders, rounder/roomier controls, a calm page
background. Per-tenant theming stays variable-driven — customer/vet
inject --primary/--accent via an inline style; admin overrides
the palette in its main.css. */
:root {
/* Tenant-themable palette (defaults = customer/vet blue+green). */
--primary: #2563eb;
--accent: #10b981;
--text: #0f172a;
--muted: #6b7280;
--bg: #ffffff;
--bg-soft: #f5f5f7;
--border: #e5e7eb;
--warn: #b45309;
--danger: #b91c1c;
/* Focus ring colour — admin overrides to its accent. */
--focus: var(--primary);
/* Surface design tokens (from app-ui). */
--radius-card: 0.875rem;
--radius-control: 0.5rem;
--shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04),
0 1px 1px rgba(15, 23, 42, 0.03);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg-soft);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
color: var(--text);
line-height: 1.5;
}
a { color: var(--primary); }
/* ====================== Topbar ====================== */
.topbar {
background: var(--primary);
color: #fff;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* Brand is a logo + name row; the gap keeps them from touching when a
practice logo is present. */
.topbar .brand {
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Per-practice logo in the bar. Capped height; width auto-scales. */
.topbar-logo {
height: 1.75rem;
width: auto;
display: block;
border-radius: 4px;
}
/* Pre-login practice branding above the login card: centred logo + name. */
.login-branding {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.login-logo {
max-height: 4rem;
max-width: 70%;
width: auto;
height: auto;
}
.login-brand-name {
font-weight: 600;
margin: 0;
text-align: center;
}
/* The nav buttons + locale picker live in this slot; space them so the
now-opaque ghost buttons don't visually run together. */
.topbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.topbar a, .topbar form button {
color: #fff;
text-decoration: none;
}
/* Ghost buttons sit on the coloured bar, so they can't use the white
page fill — give them the same translucent treatment as the locale
picker (see shared.css) instead of white-on-white. */
.topbar .button-ghost {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
}
.topbar .button-ghost:hover { background: rgba(255, 255, 255, 0.2); }
main {
max-width: 720px;
margin: 1.5rem auto;
padding: 0 1rem;
}
h1, h2, h3 { line-height: 1.2; margin: 1.5rem 0 0.75rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
/* ====================== Card / rows ====================== */
.card {
background: var(--bg);
border-radius: var(--radius-card);
padding: 1rem 1.25rem;
margin: 1rem 0;
box-shadow: var(--shadow-card);
}
.card-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.card-row + .card-row { margin-top: 0.5rem; }
.label { color: var(--muted); font-size: 0.875rem; }
.value { font-weight: 600; }
.value-large { font-size: 1.5rem; font-weight: 700; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }
/* ====================== Budget bar ====================== */
.budget-bar {
height: 0.5rem;
background: var(--border);
border-radius: 999px;
overflow: hidden;
margin-top: 0.5rem;
}
.budget-bar-fill {
height: 100%;
background: var(--accent);
transition: width 200ms;
}
.budget-bar-fill.over { background: var(--warn); }
/* ====================== Control grouping ======================
CONVENTION: interactive controls (buttons, inputs, selects) must never
visually touch. Always group adjacent controls in a flex container with
`gap` — never place two controls as bare siblings. Use one of:
.action-row (shared.css) — a row of buttons
.field-row (below) — label + input + optional action button
.log-tabs / .pager — purpose-built groups
The shared form layout already spaces stacked fields via `form { gap }`.
*/
/* Label + control (+ action) on one line, evenly spaced and wrapping. */
.field-row {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin: 0.25rem 0;
}
/* Label text stacked above its control (feeding picker search box). */
.field-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
/* Full-width, left-aligned list buttons (larder + catalog picker results),
stacked so adjacent options never touch — Spec: controls never touch. */
.is-block {
display: block;
width: 100%;
text-align: left;
margin: 0.25rem 0;
}
/* A compact standalone input (outside