/* 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 — now BRIDGED onto the Pfotenkur design
tokens (crates/ui/style/tokens.css). Every component below still
reads these semantic names, so the whole web UI re-skins to the
brand without per-rule edits. Per-tenant whitelabel overrides
--pk-accent at runtime (ui::theme), which re-resolves --primary. */
--primary: var(--pk-accent); /* header, buttons, tabs, focus */
/* Secondary/data accent = brand green: trend & BCS chart strokes, the
version banner, button-accent. The kcal progress fill is decoupled and
reads --pk-accent (teal) directly, so this green is the data-viz tone,
giving the brand its teal-UI / green-data two-tone. Whitelabel still
overrides --accent with the practice's own secondary at runtime. */
--accent: var(--pk-green-deep);
--text: var(--pk-ink);
--muted: var(--pk-ink-muted);
--bg: var(--pk-white);
--bg-soft: var(--pk-paper);
--border: var(--pk-border);
--warn: var(--pk-amber);
--danger: var(--pk-clay);
/* Focus ring colour — admin overrides to its accent. */
--focus: var(--pk-accent);
/* Surface design tokens — bridged to the brand radii/shadow. */
--radius-card: var(--pk-radius-xl); /* 16px cards */
--radius-control: var(--pk-radius-md); /* 10px controls */
--shadow-card: var(--pk-shadow-card);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg-soft);
}
body {
font-family: var(--pk-font-body);
color: var(--text);
line-height: 1.5;
}
a { color: var(--pk-accent-deep); }
/* ====================== Topbar ====================== */
.topbar {
background: var(--primary);
color: var(--pk-accent-on);
padding: 0.75rem var(--pk-space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* Ink variant (§01): the platform-admin level signal — a dark --pk-ink bar
with the context label in brand green. After `.topbar` so it wins the
background; the lockup + button system are shared with the teal portals. */
.topbar-ink { background: var(--pk-ink); }
.topbar-ink .topbar-context-label { color: var(--pk-green); opacity: 1; }
/* Brand row: the Pfotenkur lockup (mark + wordmark) and, to its right, the
practice context — separated so they don't run together. */
.topbar .brand {
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.65rem;
}
/* Per-practice logo, shown only under white-label. Capped height. */
.topbar-logo {
height: 1.75rem;
width: auto;
display: block;
border-radius: 4px;
}
/* White-label practice name (shown beside the practice's own logo). */
.topbar .brand-name {
font-family: var(--pk-font-display);
font-weight: var(--pk-weight-bold);
font-size: var(--pk-text-lg);
letter-spacing: -0.01em;
}
/* The Pfotenkur lockup: design's inverted (white) horizontal logo as an
on the accent/ink bar — coin + wordmark in outline paths (#F5FAF5 disc/text,
teal paws, green leaf), so it's self-contained and CSP-safe (img-src 'self',
no font @import). */
.topbar-wordmark {
height: 1.6rem;
width: auto;
display: block;
}
/* Practice context to the right of the lockup: a divider, then a smaller
block. In the vet portal the label ("Praxis-Portal") sits above-or-before
the practice name; on the customer side just the practice name shows. */
.topbar-context {
display: inline-flex;
flex-direction: column;
justify-content: center;
line-height: 1.15;
padding-left: 0.65rem;
border-left: 1px solid rgba(245, 250, 245, 0.3);
}
.topbar-context-label {
font-family: var(--pk-font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.9;
}
/* Customer (dog owner): the practice name stays full-size, co-equal with the
wordmark. */
.topbar-context-name {
font-family: var(--pk-font-display);
font-weight: var(--pk-weight-bold);
font-size: var(--pk-text-lg);
letter-spacing: -0.01em;
}
/* Vet portal: the "Praxis-Portal" label + practice name read as a smaller,
secondary block next to the wordmark. */
.topbar-context.is-compact .topbar-context-name {
font-family: var(--pk-font-body);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0;
}
/* Customer portal: same compact treatment, but the "Kunden-Portal" label sits
to the RIGHT of the practice name (a row), not stacked above it. */
.topbar-context.label-after {
flex-direction: row;
align-items: baseline;
gap: 0.45rem;
}
/* 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-family: var(--pk-font-display);
font-weight: var(--pk-weight-bold);
font-size: var(--pk-text-lg);
margin: 0;
text-align: center;
}
/* Full-colour Pfotenkur wordmark above the (light) login card. */
.login-wordmark {
height: 2.75rem;
width: auto;
max-width: 80%;
}
/* 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;
flex-wrap: wrap;
gap: 0.5rem;
}
.topbar a, .topbar form button {
color: #F5FAF5;
text-decoration: none;
}
/* Action buttons on the coloured bar — teal product portals OR the ink admin
bar — use the light-on-dark scale from §01, not the white page fill.
Primary CTA = solid paper fill (high contrast); secondary/nav buttons +
selects = a subtle translucent paper tint with a readable hairline. */
.topbar .button-primary {
background: #F5FAF5;
color: var(--pk-accent-deep);
border-color: transparent;
}
.topbar .button-primary:hover { background: #fff; }
.topbar .button-secondary {
background: rgba(245, 250, 245, 0.14);
color: #F5FAF5;
border-color: rgba(245, 250, 245, 0.25);
}
.topbar .button-secondary:hover { background: rgba(245, 250, 245, 0.24); }
/* §C3: a ghost button on the ink/teal bar (e.g. admin "Abmelden") reads as a
quiet transparent OUTLINE — not a translucent grey box that looks foreign on
the dark header. Fills only on hover. */
.topbar .button-ghost {
background: transparent;
color: #F5FAF5;
border-color: rgba(245, 250, 245, 0.25);
}
.topbar .button-ghost:hover { background: rgba(245, 250, 245, 0.14); }
/* Locale/practice selects share the secondary treatment (overrides the
white-on-dark default from shared.css with the §01 paper tint). */
.topbar .locale-picker select,
.topbar .practice-switcher select {
/* The dense topbar selects keep their compact NATIVE arrow — the central
flat/chevron look is for content selects. `appearance:auto` undoes the
global `select` rule; `background-image:none` cancels its chevron (which
would otherwise tile, since shared.css's shorthand resets the repeat);
`min-height:0` opts out of the 2.5rem field floor so they stay compact
(sized by shared.css's padding) instead of growing to button height. */
-webkit-appearance: auto;
appearance: auto;
min-height: 0;
background-color: rgba(245, 250, 245, 0.14);
background-image: none;
color: #F5FAF5;
border-color: rgba(245, 250, 245, 0.25);
}
/* Nav-links (§01): quiet light text, no fill; the active route gets a
translucent pill. Distinct from the secondary/ghost buttons above. */
.topbar .topbar-navlink {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
padding: 0.4rem 0.85rem;
border-radius: var(--pk-radius-md);
color: #D7ECDC;
font-weight: 600;
text-decoration: none;
}
.topbar .topbar-navlink:hover { background: rgba(245, 250, 245, 0.10); color: #F5FAF5; }
.topbar .topbar-navlink.is-active {
background: rgba(245, 250, 245, 0.16);
color: #F5FAF5;
}
main {
max-width: 720px;
margin: 1.5rem auto;
padding: 0 1rem;
}
h1, h2, h3 {
font-family: var(--pk-font-display);
color: var(--pk-ink);
line-height: 1.2;
margin: 1.5rem 0 0.75rem;
}
h1 { font-size: 1.75rem; font-weight: var(--pk-weight-bold); } /* pet-name (README §10) */
h2 { font-size: var(--pk-h3); font-weight: var(--pk-weight-bold); } /* card titles (README §2) */
h3 { font-weight: var(--pk-weight-semibold); }
/* ====================== Card / rows ====================== */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: var(--pk-space-6);
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(--pk-ink-soft); font-size: 0.875rem; }
/* Measured values are monospaced for that clinical, tabular feel (README
§2/§3). No nowrap here: .value also carries text fallbacks ("not enough
measurements") that must be free to wrap on narrow screens. */
.value {
font-family: var(--pk-font-mono);
font-weight: 600;
}
/* The highlighted figure (e.g. "Remaining 1172 kcal") leans on the accent. */
.value-large {
font-family: var(--pk-font-mono);
font-size: 1.5rem;
font-weight: 600;
color: var(--pk-accent-deep);
white-space: nowrap;
}
/* .value-text / .value-note live in shared.css (also reached by app-ui, which
doesn't load web.css) — see the §00 #4 mono-for-prose fix. */
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }
/* ====================== Budget bar ====================== */
.budget-bar {
height: 0.5rem;
background: var(--pk-accent-soft);
border-radius: var(--pk-radius-pill);
overflow: hidden;
margin-top: 0.5rem;
}
.budget-bar-fill {
height: 100%;
background: var(--pk-accent); /* progress fill = brand accent (README §4) */
border-radius: var(--pk-radius-pill);
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 — the central §A1 rule gives it the field look;
this only sets the narrow width. */
.field-input { width: 6rem; }
/* The picker search box opts into full width via .is-block, but plain
`.is-block` loses to the later, equal-specificity `.field-input { width:6rem }`.
This combined selector wins so the feeding search field spans the row. */
.field-input.is-block { width: 100%; }
/* (Re-attach code + inline entry-edit inputs in .field-row sit outside a