/*
  App-wide styles on top of the Radzen "material" theme (decision 0006).
  Use Radzen components for controls; keep this file for layout and app-specific bits.
*/
:root {
    --bg: #ffffff;
    --surface: #f5f6f8;
    --text: #1d2129;
    --muted: #5b6270;
    --line: #d9dde3;
    --accent: #1f6feb;
    --warn-bg: #fff4ce;
    --danger: #b42318;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
}

body { margin: 0; }

/* Themes (decision 0051, Access's colour themes): the side menu, page, accent and taskbar. Chosen per user with the
   palette in the top bar (Shared/Theme); <html data-theme> holds the choice. "ocean" is the default. */
:root, :root[data-theme="ocean"] {
    --vcp-side-from: #17323d; --vcp-side-to: #1d4250; --vcp-accent: #2a7f93; --vcp-accent-light: #3fb0c9;
    --vcp-page: #eef3f5; --vcp-taskbar: rgba(23, 50, 61, 0.96);
}
:root[data-theme="forest"] {
    --vcp-side-from: #17301f; --vcp-side-to: #22432d; --vcp-accent: #2e7d4f; --vcp-accent-light: #5cc98a;
    --vcp-page: #edf3ee; --vcp-taskbar: rgba(23, 48, 31, 0.96);
}
:root[data-theme="sunset"] {
    --vcp-side-from: #3a2218; --vcp-side-to: #52301f; --vcp-accent: #c0602b; --vcp-accent-light: #f0a35e;
    --vcp-page: #f6efea; --vcp-taskbar: rgba(58, 34, 24, 0.96);
}
:root[data-theme="plum"] {
    --vcp-side-from: #261a36; --vcp-side-to: #382a4f; --vcp-accent: #7650b0; --vcp-accent-light: #b18be6;
    --vcp-page: #f1eef6; --vcp-taskbar: rgba(38, 26, 54, 0.96);
}
:root[data-theme="graphite"] {
    --vcp-side-from: #1f2328; --vcp-side-to: #2d3339; --vcp-accent: #4b5a68; --vcp-accent-light: #9aa8b5;
    --vcp-page: #eceef0; --vcp-taskbar: rgba(31, 35, 40, 0.96);
}
/* A dark page: the windows stand out most. */
:root[data-theme="midnight"] {
    --vcp-side-from: #0d141c; --vcp-side-to: #152230; --vcp-accent: #2f6fd1; --vcp-accent-light: #67a3f5;
    --vcp-page: #253240; --vcp-taskbar: rgba(13, 20, 28, 0.97);
}
/* The colour of each kind of window (WindowIcons.Family) in each theme: a pet is always green, a client blue, in
   shades that suit the theme (AppThemes.All has the same colours for the pickers). A user's own colours override them. */
:root, :root[data-theme="ocean"] {
    --vcp-fam-client: #2f7fd1; --vcp-fam-patient: #2f9a58; --vcp-fam-clinical: #0f8790; --vcp-fam-appointment: #d48a06;
    --vcp-fam-hotel: #7a58c4; --vcp-fam-message: #c2457a; --vcp-fam-stock: #c06526; --vcp-fam-setup: #5b6b7a;
}
:root[data-theme="forest"] {
    --vcp-fam-client: #3a78a8; --vcp-fam-patient: #3d8b4f; --vcp-fam-clinical: #2b7d6c; --vcp-fam-appointment: #b8892a;
    --vcp-fam-hotel: #76659e; --vcp-fam-message: #a8566a; --vcp-fam-stock: #a0662f; --vcp-fam-setup: #5f6b5a;
}
:root[data-theme="sunset"] {
    --vcp-fam-client: #3f74b0; --vcp-fam-patient: #7f9a35; --vcp-fam-clinical: #2a8a84; --vcp-fam-appointment: #d99a1b;
    --vcp-fam-hotel: #9a4f7a; --vcp-fam-message: #c7404f; --vcp-fam-stock: #c0602b; --vcp-fam-setup: #7a6558;
}
:root[data-theme="plum"] {
    --vcp-fam-client: #5a6fc0; --vcp-fam-patient: #4f8f6a; --vcp-fam-clinical: #3f7fa0; --vcp-fam-appointment: #c98a2e;
    --vcp-fam-hotel: #7650b0; --vcp-fam-message: #c24f8f; --vcp-fam-stock: #b06548; --vcp-fam-setup: #6a6080;
}
:root[data-theme="graphite"] {
    --vcp-fam-client: #4b6a88; --vcp-fam-patient: #4f7a5f; --vcp-fam-clinical: #3f7478; --vcp-fam-appointment: #a88a4a;
    --vcp-fam-hotel: #6e6488; --vcp-fam-message: #8f5a6e; --vcp-fam-stock: #8f6a4f; --vcp-fam-setup: #5b6570;
}
:root[data-theme="midnight"] {
    --vcp-fam-client: #4f8ff0; --vcp-fam-patient: #3fbf74; --vcp-fam-clinical: #22b0b8; --vcp-fam-appointment: #f0a826;
    --vcp-fam-hotel: #9a7af0; --vcp-fam-message: #e86aa0; --vcp-fam-stock: #e8823e; --vcp-fam-setup: #8a9aac;
}

/* The side menu's width (MainLayout): windows open beside it, never under it (decision 0011). */
/* The theme reaches every control inside the forms (asked 2026-10-26), not only the frame: buttons, tabs, tick boxes,
   selected rows, links, headings and the light fills of boxes and panels all take the theme's accent. The forms' CSS
   uses these names instead of fixed colours. Ocean keeps its exact colours; the other themes mix them from their accent. */
:root, :root[data-theme="ocean"] {
    --vcp-accent-dark: #1f6f8b; --vcp-accent-mid: #3c8ba0; --vcp-ink: #17323d; --vcp-ink-2: #1f5566;
    --vcp-text-2: #3d5a66; --vcp-text-3: #5d7783; --vcp-text-4: #6b7f88;
    --vcp-tint-0: #f6fafb; --vcp-tint-1: #eef6f8; --vcp-tint-2: #e3f1f5; --vcp-tint-3: #e1ebf0; --vcp-tint-4: #d6e4ea;
    --vcp-line-soft: #e3eaee; --vcp-line-accent: #c9dde4;
}
:root[data-theme]:not([data-theme="ocean"]) {
    --vcp-accent-dark: color-mix(in srgb, var(--vcp-accent) 82%, #000);
    --vcp-accent-mid: color-mix(in srgb, var(--vcp-accent) 86%, #fff);
    --vcp-ink: color-mix(in srgb, var(--vcp-accent) 32%, #0b1215);
    --vcp-ink-2: color-mix(in srgb, var(--vcp-accent) 62%, #0b1215);
    --vcp-text-2: color-mix(in srgb, var(--vcp-accent) 30%, #2f3639);
    --vcp-text-3: color-mix(in srgb, var(--vcp-accent) 28%, #5f666b);
    --vcp-text-4: color-mix(in srgb, var(--vcp-accent) 20%, #6f767b);
    --vcp-tint-0: color-mix(in srgb, var(--vcp-accent) 4%, #fff);
    --vcp-tint-1: color-mix(in srgb, var(--vcp-accent) 8%, #fff);
    --vcp-tint-2: color-mix(in srgb, var(--vcp-accent) 13%, #fff);
    --vcp-tint-3: color-mix(in srgb, var(--vcp-accent) 12%, #eceeef);
    --vcp-tint-4: color-mix(in srgb, var(--vcp-accent) 18%, #e4e7e8);
    --vcp-line-soft: color-mix(in srgb, var(--vcp-accent) 10%, #e7e9ea);
    --vcp-line-accent: color-mix(in srgb, var(--vcp-accent) 28%, #fff);
}
/* The forms' own blue-teal shades (Ocean's) are turned to the theme's hue at the same lightness: each such colour is
   written as hsl(from <ocean colour> calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l), after the plain colour
   for older browsers. --vcp-hue is the turn from Ocean's accent to the theme's; Graphite is also greyer. */
:root, :root[data-theme="ocean"] { --vcp-hue: 0; --vcp-sat: 1; }
:root[data-theme="forest"] { --vcp-hue: -47; --vcp-sat: 0.9; }
:root[data-theme="sunset"] { --vcp-hue: -171; --vcp-sat: 1; }
:root[data-theme="plum"] { --vcp-hue: 72; --vcp-sat: 0.9; }
:root[data-theme="graphite"] { --vcp-hue: 17; --vcp-sat: 0.3; }
:root[data-theme="midnight"] { --vcp-hue: 24; --vcp-sat: 1.1; }
/* Radzen's own controls (buttons, tabs, switches, sliders, grid selection, focus) use the theme's accent. html:root
   outranks Radzen's :root. */
html:root {
    --rz-primary: var(--vcp-accent);
    --rz-primary-light: var(--vcp-accent-mid);
    --rz-primary-lighter: color-mix(in srgb, var(--vcp-accent) 12%, transparent);
    --rz-primary-dark: var(--vcp-accent-dark);
    --rz-primary-darker: color-mix(in srgb, var(--vcp-accent) 65%, #000);
    --rz-on-primary-lighter: var(--vcp-accent-dark);
}

:root { --vcp-side-w: 14.5rem; --vcp-top-h: 3.6rem; }
:root:has(.shell.collapsed) { --vcp-side-w: 4rem; }
:root:not(:has(.shell)) { --vcp-side-w: 0px; --vcp-top-h: 0px; }
@media (max-width: 900px) { :root { --vcp-side-w: 4rem; } }
/* A work screen full screen (decision 0064, wwwroot/js/screens.js): the window has the whole monitor. */
body.vcp-fullscreen .side, body.vcp-fullscreen .topbar, body.vcp-fullscreen .tb { visibility: hidden; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h1:focus { outline: none; }
a { color: var(--accent); }

.lang-switch { display: flex; gap: 0.15rem; }
.lang-switch button { font: inherit; font-size: 0.85rem; border: 1px solid var(--line); background: var(--bg); color: var(--muted); padding: 0.1rem 0.45rem; border-radius: 4px; cursor: pointer; }
.lang-switch button.active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.demo-banner { padding: 0.4rem 1.25rem; background: var(--warn-bg); font-size: 0.9rem; }

.search-box { width: 100%; max-width: 560px; margin-bottom: 1rem; }
.hint { color: var(--muted); }
.error { color: var(--danger); }

.client-grid .rz-data-row { cursor: pointer; }
.client-grid .rz-data-row.inactive td { color: var(--muted); }


.client-card { max-width: 760px; }
h1 .rz-badge { vertical-align: middle; margin-left: 0.4rem; }
dl.fields { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; }
dl.fields dt { color: var(--muted); }
dl.fields dd { margin: 0; }

/* No green/red outline from EditForm's field state classes: the forms show their own messages next to the fields. */
.validation-message { color: #e50000; }

.blazor-error-boundary { background: var(--danger); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }


/* Page header with an action on the right (e.g. "New client"). */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-head > :last-child { margin-left: auto; }

/* The client form opened as a page fills the window height like it does in a window. */
.client-page { height: calc(100vh - 9rem); min-height: 38rem; }

/* A button that looks like a link (RadzenLink only navigates; it has no click handler). */
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--rz-primary, #d81b60); cursor: pointer; text-decoration: none; }
.link-button:hover { text-decoration: underline; }

/* ---- Home page widgets (Shared/Dashboard, decision 0010): shared list look ---- */
/* One scrollbar per widget (asked): gridstack lets the cell scroll as well; only the widget's body (WidgetFrame) does. */
.dash-grid .grid-stack > .grid-stack-item > .grid-stack-item-content { overflow: hidden; }
.wl { list-style: none; margin: 0; padding: 0; }
.wl-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: 10px; cursor: pointer; transition: background 0.12s; min-width: 0; }
.wl-row:hover { background: #f1f7f9; background: hsl(from #f1f7f9 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.wl-row.past { opacity: 0.55; }
.wl-row.current { background: #e9f6f9; background: hsl(from #e9f6f9 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); box-shadow: inset 3px 0 0 var(--vcp-accent); }
.wl-row.cancelled .wl-title { text-decoration: line-through; color: #8a9aa1; }
.wl-row.party { background: #fff6e0; }
.wl-row.overdue .wl-title strong { color: #b42318; }
.wl-time { flex: 0 0 3.2rem; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.wl-time strong { font-size: 0.95rem; color: var(--vcp-ink); }
.wl-time small { font-size: 0.72rem; color: #7d929b; color: hsl(from #7d929b calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.wl-bar { flex: 0 0 4px; align-self: stretch; border-radius: 3px; }
.wl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; }
.wl-title { color: var(--vcp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; }
.wl-muted { color: var(--vcp-text-4); font-weight: 400; }
.wl-sub { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--vcp-text-4); white-space: nowrap; overflow: hidden; }
.wl-sub > span { overflow: hidden; text-overflow: ellipsis; }
.wl-chip { flex: 0 0 auto; padding: 0.05rem 0.45rem; border-radius: 6px; background: var(--vcp-tint-1); color: var(--vcp-text-2); font-size: 0.7rem; font-weight: 600; }
.wl-when { flex: 0 0 auto; font-size: 0.78rem; color: var(--vcp-text-4); white-space: nowrap; }
.wl-ok { color: #2e9a52; display: inline-flex; }
.wl-ok .rzi { font-size: 1rem; }
.wl-kind { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.wl-kind .rzi { font-size: 1.1rem; }
.wl-kind.pet { background: #e6f4e7; color: #2e7d32; }
.wl-kind.client { background: #e3effa; color: #23608f; }
.wl-status { flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.wl-status .rzi { font-size: 1rem; }
.wl-status.arrived { background: #e3f5e8; color: #2e7d32; }
.wl-status.cancelled { background: #f0f0f0; color: #8a8a8a; }
.wl-quick { flex: 0 0 auto; display: flex; gap: 0.2rem; }
.wl-q { width: 1.85rem; height: 1.85rem; border: 1px solid #cfdde3; border: 1px solid hsl(from #cfdde3 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); border-radius: 50%; background: #fff; color: #7d929b; color: hsl(from #7d929b calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.wl-q .rzi { font-size: 1.05rem; }
.wl-q.arrived:hover { border-color: #2e7d32; color: #2e7d32; }
.wl-q.cancelled:hover { border-color: #c62828; color: #c62828; }
.wl-q.arrived.on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.wl-q.cancelled.on { background: #8a8a8a; border-color: #8a8a8a; color: #fff; }
.wl-q:disabled { opacity: 0.5; cursor: progress; }
/* Always shown (asked): the client, then the pet, each in its own place so the rows line up when one is missing. */
.wl-actions { flex: 0 0 auto; display: flex; gap: 0.2rem; }
.wl-actions > * { width: 1.85rem; height: 1.85rem; }
.wl-actions button { border: 1px solid #cfdde3; border: 1px solid hsl(from #cfdde3 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); border-radius: 7px; background: #fff; color: var(--vcp-accent); cursor: pointer; padding: 0;
                     display: inline-flex; align-items: center; justify-content: center; }
.wl-actions button .rzi { font-size: 1.1rem; }
.wl-actions button:hover { background: var(--vcp-accent); border-color: var(--vcp-accent); color: #fff; }
.wl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; height: 100%; min-height: 5rem; padding: 0.8rem; color: #7d929b; color: hsl(from #7d929b calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); font-size: 0.9rem; text-align: center; }
.wl-empty .rzi { font-size: 2rem; color: #b8c9d0; color: hsl(from #b8c9d0 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.wl-empty.small { height: auto; }
.wl-day { position: sticky; top: -0.35rem; z-index: 1; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.5rem 0.25rem; background: #fff;
          font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vcp-text-4); }
.wl-day span { padding: 0 0.4rem; border-radius: 9px; background: var(--vcp-tint-1); color: var(--vcp-text-2); letter-spacing: 0; }
.wl-link { border: 0; background: transparent; color: var(--vcp-accent); font: inherit; font-size: 0.78rem; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 6px; }
.wl-link:hover { background: var(--vcp-tint-1); }
.now-line { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0; color: #e5484d; font-size: 0.7rem; font-weight: 700; list-style: none; }
.now-line::after { content: ""; flex: 1; height: 2px; background: #e5484d; border-radius: 2px; }
.now-line span { flex: 0 0 3.2rem; text-align: right; }
.day-nav { display: flex; align-items: center; gap: 0.2rem; }
.day-nav button { height: 1.75rem; min-width: 1.75rem; padding: 0 0.4rem; border: 1px solid #dbe4e8; border: 1px solid hsl(from #dbe4e8 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); border-radius: 7px; background: #fff; color: var(--vcp-text-2);
                  font: inherit; font-size: 0.76rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.day-nav button .rzi { font-size: 1.05rem; }
.day-nav button:hover { background: #f3f7f9; background: hsl(from #f3f7f9 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.day-nav button.on { background: var(--vcp-accent); border-color: var(--vcp-accent); color: #fff; font-weight: 600; }
.grid-stack-placeholder > .placeholder-content { background: color-mix(in srgb, var(--vcp-accent) 12%, transparent) !important; border: 2px dashed var(--vcp-accent); border-radius: 14px; }
.wl-row.msg .wl-sub > span:first-child { white-space: nowrap; }
.wl-msg-dot { flex: 0 0 0.6rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #c9d6dc; background: hsl(from #c9d6dc calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.wl-row.msg.urgent { background: #fff7f7; }
.wl-row.msg.urgent .wl-msg-dot { background: #e57373; }
.wl-row.msg.seen .wl-msg-dot { background: #81c784; }
.wl-row.msg.back .wl-msg-dot { background: #4fb3d9; background: hsl(from #4fb3d9 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.wl-msg-actions { display: flex; gap: 0.15rem; }
.wl-msg-actions button { width: 1.8rem; height: 1.8rem; border: 1px solid var(--vcp-line-soft); border-radius: 7px; background: #fff; color: #98a8ae; cursor: pointer;
                         display: inline-flex; align-items: center; justify-content: center; }
.wl-msg-actions button .rzi { font-size: 1rem; }
.wl-msg-actions button.seen.on { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.wl-msg-actions button.back.on { background: #e1f3fa; background: hsl(from #e1f3fa calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); border-color: #90cfe3; border-color: hsl(from #90cfe3 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); color: #1f6f88; color: hsl(from #1f6f88 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
.wg-add { width: 1.9rem; height: 1.75rem; border: 0; border-radius: 7px; background: var(--vcp-accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wg-add .rzi { font-size: 1.05rem; }

/* Dropdowns everywhere: the letters sit in the middle of the box, whatever its height and font. Radzen lays the box
   out as a column (so centre it that way), and fonts such as Windows' Segoe UI keep more room under the letters than
   over them, so the text looked high. text-box trims the line to the capital letters and the baseline; the equal
   padding gives accents and descenders their room back (browsers without text-box just centre the line). */
.rz-dropdown { justify-content: center; }
.rz-dropdown > .rz-dropdown-label { flex: 0 0 auto; line-height: 1.2; padding-block: 0.32em; text-box: trim-both cap alphabetic; }

/* Text boxes everywhere have no border (asked): a light fill shows the box, white with a soft ring while typing.
   Set through the theme's own variables, so every Radzen input follows: text boxes, text areas, numbers, dates,
   drop-downs, auto-complete, masks. Hand-built inputs use the same colours (--vcp-field-*). A wrong value still
   gets the theme's red ring (rz-state-invalid). */
:root {
    --vcp-field-bg: var(--vcp-tint-3);
    --vcp-field-hover-bg: var(--vcp-tint-4);
    --vcp-field-focus-ring: 0 0 0 2px color-mix(in srgb, var(--vcp-accent) 35%, transparent);
    --rz-input-border: none;
    --rz-input-hover-border: none;
    --rz-input-focus-border: none;
    --rz-input-disabled-border: none;
    --rz-input-border-block-end: none;
    --rz-input-hover-border-block-end: none;
    --rz-input-focus-border-block-end: none;
    --rz-input-disabled-border-block-end: none;
    --rz-input-background-color: var(--vcp-field-bg);
    --rz-input-hover-background-color: var(--vcp-field-hover-bg);
    --rz-input-focus-background-color: #ffffff;
    --rz-input-focus-shadow: var(--vcp-field-focus-ring);
    --rz-input-disabled-background-color: #f1f4f5; --rz-input-disabled-background-color: hsl(from #f1f4f5 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l);
    --rz-input-border-radius: 6px;
}
.rz-state-invalid, .rz-state-invalid:focus-within { box-shadow: inset 0 0 0 1px var(--rz-danger) !important; }
/* Tick boxes and radio buttons keep their outline: Radzen draws it with the input border variable cleared above. */
.rz-chkbox-box, .rz-radiobutton-box { border: 2px solid #8a9aa1; background-color: #fff; }
.rz-chkbox-box.rz-state-active, .rz-radiobutton-box.rz-state-active { border-color: var(--rz-primary); }
.rz-chkbox-box.rz-state-active { background-color: var(--rz-primary); }
.rz-chkbox-box.rz-state-disabled, .rz-radiobutton-box.rz-state-disabled { border-color: #c6d3d8; border-color: hsl(from #c6d3d8 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }

/* Tab headers' record counts (Shared/TabTitle.razor): white on the teal tabs, teal on a selected white tab; muted at 0. */
.tab-count {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.25rem; padding: 0 0.4rem;
    margin-left: 0.4rem; border-radius: 999px; background: #ffffff; color: var(--vcp-ink-2); font-size: 0.75rem; font-weight: 700; line-height: 1;
    letter-spacing: 0; text-transform: none;
}
.tab-count.zero { background: rgba(255, 255, 255, 0.28); color: inherit; font-weight: 600; }
.rz-tabview-selected .tab-count { background: var(--vcp-ink-2); color: #ffffff; }
.rz-tabview-selected .tab-count.zero { background: var(--vcp-tint-3); color: #4a5f68; color: hsl(from #4a5f68 calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); }
/* A long tab name shortens with "…" rather than wrapping, so the count stays in view. */
.rz-tabview-nav li { min-width: 0; }
.rz-tabview-nav li button { min-width: 0; }
.rz-tabview-nav li button .rz-tabview-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tab headers across the project: smaller text than Radzen's material default (0.875rem, wide spacing). */
:root { --rz-tabs-tab-font-size: 0.75rem; --rz-tabs-tab-letter-spacing: 0.5px; --rz-tabs-icon-font-size: 1.15rem; }
/* The teal tabs (pet, visit, client forms): a highlighted (hovered or focused) tab turns light with dark text,
   the reverse of its normal colours, so it stays readable; white text on Radzen's light hover was not. */
:is(.pf-tabs, .ve-tabs, .cf-tabs) .rz-tabview-nav li:is(:hover, .rz-state-focused):not(.rz-tabview-selected):not(.rz-state-disabled) {
    background: var(--vcp-tint-3) !important;
}
:is(.pf-tabs, .ve-tabs, .cf-tabs) .rz-tabview-nav li:is(:hover, .rz-state-focused):not(.rz-tabview-selected):not(.rz-state-disabled) :is(button, .rz-tabview-title, .rz-tabview-icon) {
    color: var(--vcp-ink-2) !important;
}
:is(.pf-tabs, .ve-tabs, .cf-tabs) .rz-tabview-nav li:is(:hover, .rz-state-focused):not(.rz-tabview-selected) .tab-count { background: var(--vcp-ink-2); color: #fff; }
:is(.pf-tabs, .ve-tabs, .cf-tabs) .rz-tabview-nav li:is(:hover, .rz-state-focused):not(.rz-tabview-selected) .tab-count.zero { background: var(--vcp-line-accent); color: var(--vcp-ink-2); }

/* Message Center: the send question keeps its sample message's line ends. */
.mc-confirm .rz-dialog-confirm-message { white-space: pre-wrap; }

/* A pet's icon (SpeciesImage): the species picture, else its emoji, else the paw when the species is not known. */
.species-paw { color: #4a7d8c; color: hsl(from #4a7d8c calc(h + var(--vcp-hue)) calc(s * var(--vcp-sat)) l); line-height: 1; vertical-align: middle; }
.species-emoji { line-height: 1; vertical-align: middle; }