/* --- DejaVu Sans — self-hosted (local) webfont, the same for every language --- */ @font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dejavusans-400.woff2') format('woff2'); } @font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/dejavusans-700.woff2') format('woff2'); } @font-face { font-family: 'DejaVu Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/dejavusans-italic-400.woff2') format('woff2'); } @font-face { font-family: 'DejaVu Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/dejavusans-italic-700.woff2') format('woff2'); } /* --- Noto Sans Georgian — the second choice of UI face (2026-09-04, owner's request) --- Self-hosted like DejaVu: no CDN, no Google Fonts link. Four subset files, each with its own `unicode-range`, which is how Google itself ships it — so a Georgian page downloads 41 KB and fetches the Latin file only when a Latin glyph appears. All four are cut from the SAME variable font (four distinct files, checked - 41.5 / 24.9 / 13.7 / 1.8 KB), which is why one file per subset serves both weights via `font-weight: 400 700` rather than the eight files a static family would need. 82 KB in total, against DejaVu's 950 KB for four static faces. Greek, math and symbol subsets were deliberately not taken: nothing in this app renders them, and an unused @font-face is a rule the browser still has to match every glyph against. **DejaVu stays in the stack behind it.** It used to be strictly load-bearing: the sort indicator was the character `⇅` (U+21C5), which no Noto family carries, so DejaVu drew it. Since v0.229.4 the sort marks are Tabler icons and no longer depend on this. DejaVu is kept anyway, for the other marks this UI prints (`↑`/`↓` on a lab result, for one) - a glyph Noto lacks is then drawn from a face that is already self-hosted, instead of falling through to whatever the operating system happens to have. */ @font-face { font-family: 'Noto Sans Georgian'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/notosansgeorgian-georgian.woff2') format('woff2'); unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; } @font-face { font-family: 'Noto Sans Georgian'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/notosansgeorgian-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans Georgian'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/notosansgeorgian-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Noto Sans Georgian'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/notosansgeorgian-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* --- Noto Sans - the Latin face of the English interface (2026-09-16, owner's request) --- Only on English, and only when the Noto pill is chosen: `html[data-font="noto"][lang="en"]` below. Georgian keeps Noto Sans Georgian in front, because that is the face its Georgian is drawn in and there is nothing for this file to add there. One subset, not the eight Google ships. `latin` alone, because Noto Sans Georgian's own `latin-ext` sits directly behind it in the English stack and is byte-identical in outline and advance (checked glyph by glyph, both are 1000 upem `wght 100-900` cuts of the same design) - so `₾`, `ā`, `ș` and the rest draw the same either way, out of 13.7 KB already on the page instead of Noto Sans' own 168 KB `latin-ext`. Worth knowing before this file is treated as load-bearing: on Latin text it renders IDENTICALLY to Noto Sans Georgian, which already served English. The only measured difference is vertical metrics, one unit of a thousand (ascender 1069 vs 1068). */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('/assets/fonts/notosans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The UI face, switched the way a theme is: one token, stamped on before first paint. `--font-ui` and not a second `body` rule, so anything that ever needs to name the face reads one place. */ html[data-font="noto"] { --font-ui: 'Noto Sans Georgian', 'Noto Sans', 'DejaVu Sans', Tahoma, Arial, sans-serif; } /* English, with the same pill chosen: Noto Sans leads, Noto Sans Georgian catches everything it does not carry - Georgian names and `latin-ext` - and the two system faces close the stack (owner, 2026-09-16). `lang` is server-rendered on , so this needs no second token and cannot flash. */ html[data-font="noto"][lang="en"] { --font-ui: 'Noto Sans', 'Noto Sans Georgian', Tahoma, Arial, sans-serif; } :root { --font-ui: 'DejaVu Sans', Tahoma, Arial, sans-serif; --primary: #4872AB; --primary-dark: #375b8b; --primary-light: #E7EEF8; --primary-text: #24446B; --accent: #B5493F; --accent-dark: #94372F; --bg: #F4F5F6; --bg-panel: #FFFFFF; --border: #E3E5E7; --text-primary: #20242A; --text-secondary: #5C646B; --text-tertiary: #949CA2; --danger-bg: #FCEBEB; --danger-text: #791F1F; --warn-bg: #FAEEDA; --warn-text: #633806; --success-bg: #E8F3EC; --success-text: #1E5334; --info-bg: #E6F0F6; --info-text: #1D4D6B; --special-bg: #EDE9FE; --special-text: #5B21B6; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Type scale. Twelve sizes were in use (10, 11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 16, 18, 19, 20) — nobody can tell 12 from 12.5 from 13, so none of them carried meaning. Six roles do. Note there is no weight scale to go with it: DejaVu ships 400 and 700 only. Five, not six: a card title at 18px sits too close to the 20px page title for a screen this dense, so titles and large controls share one step. */ --fs-micro: 11px; --fs-small: 12px; --fs-base: 13px; --fs-title: 15px; --fs-page: 20px; /* Spacing, named for what it separates rather than how big it is. The invariant worth protecting: distance between related fields < distance between sections. Today both are 18px, which is exactly why grouping is invisible on long forms. */ --sp-tight: 4px; --sp-control: 8px; --sp-group: 16px; --sp-section: 24px; --sp-page: 32px; /* Button surfaces — see "VETMAN BUTTON SYSTEM" further down for the measurements. --primary-text is primary-COLOURED text meant for a light ground (it pairs with --primary-light); on --primary itself it fails AA in all 9 themes, best case 2.85:1. A filled action button therefore needs its own fill/ink pair, and a control boundary needs its own line colour: --border is 1.24–1.90:1 against a panel in every theme, which is a hairline, not the 3:1 WCAG 1.4.11 wants from a control's edge. */ --action-bg: var(--primary); --on-action: #FFFFFF; /* Hue where the table is furniture, neutral where it is data. The stripe and the lines sit behind and between the content, so they mix from the theme's own ink: a low percentage of a saturated blue is neither white nor blue, it is dirty blue, and it tints the data resting on it. The header band and the row hover are chrome and interaction, where the theme's colour belongs and reads as intent. On the default theme the neutral stripe spreads 2 of 255 between channels, the tinted header 14 — both quiet, but only one of them colours the text above it. The steps are ordered by how much attention each deserves: a stripe you should not notice, a hover you should, a header above both, and the lines that hold it together. Not --border for the lines: that token is tinted very differently per theme — pale green in nordic-emerald, pale red in terracotta-exec, pale yellow in warm-amber — and a red hairline under every row competes with the one colour in a row that carries meaning, the status pill. */ /* 6% — #F5F6F6 in the default theme. Picked by eye by the owner, who then named the exact mix; it is the value that was live while the header was a dark band, and the one they were remembering. Deliberately a mix and NOT `var(--bg)`, even though the page ground is almost this colour here. Tying the stripe to --bg would give this theme its exact grey and take the stripe away in half the others: measured against their own panel, the page ground is 1.034 in warm, 1.045 in warm-amber, 1.046 in clinical and 1.047 in nordic-emerald — at or under the 1.055 this file already records as "present in theory, invisible in practice". The mix holds 1.083 in all ten, which is quiet but never absent. */ --tbl-zebra: color-mix(in srgb, var(--text-secondary) 6%, var(--bg-panel)); --rule: color-mix(in srgb, var(--text-secondary) 22%, var(--bg-panel)); --tbl-frame: color-mix(in srgb, var(--text-secondary) 50%, var(--bg-panel)); /* Form controls. Light themes draw a white field on a white card, which is what they have always done; the dark theme recesses it to the page ground so the field is visible against its panel at all. That difference used to be an !important block, which meant any future change to input styling would silently not apply in dark — the same trap the table header sat in. */ --field-bg: var(--bg-panel); /* A hint, plainly lighter than a typed value. Measured against the field fill, a placeholder lands at 2.79–2.96:1 in every theme while a real value sits at 9.72–17.85 — a 3.3–6.4× gap, so the two can never be mistaken for each other. Below 3:1 is deliberate and safe here: every field has a real label (v0.47.0), so the placeholder is a hint and not the field's name. Two themes override this token because their own tertiary ink is much darker (pro-slate 4.76, dark 3.75) and would read as typed text. */ --placeholder: var(--text-tertiary); /* The page grid, named so the header can align with the column below it. The search field's left edge has to meet the content's, and that could not be expressed while 252, 20, 14 and 26 were scattered across five rules. */ --sidebar-w: 252px; --header-pad: 20px; --header-gap: 14px; --content-pad: 26px; /* The dropdown arrow. A token because an SVG data URI cannot read a CSS variable from inside itself, so the only way a theme can restyle it is to replace the whole url() — which is what the dark theme does below. The grey is 6.02:1 on a light field; the same grey measured 2.97:1 on the dark theme's, just under the 3:1 WCAG 1.4.11 asks of a control's indicator. */ --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C646B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* The header band, v0.162.10 (owner instruction, #12). It was an 18% wash of --primary, which put a blue band over an amber or green zebra inside a category card — two hues in one table, and the reason the whole treatment was rejected. The band is now the ink colour itself, softened toward the panel: dark enough to be unmistakably a header, neutral so nothing in the table competes with the one thing that carries meaning. **There is no band any more (v0.162.13), and the reason is a trap worth writing down.** The band and the zebra are both a mix of the same ink into the same panel, so they compete for one narrow range of light greys: every step that makes the band more visible walks it into the stripe. Measured, a 16% band sits 1.076:1 from an 11% stripe — indistinguishable. Four numbers were tried (10 / 16 / 22 / 30) before it became clear the number was never the problem. Two earlier attempts, for the record: an 18% wash of --primary (the blue band that put a second hue over an amber zebra, rejected in #12) and --text-primary at 85% (a dark band, rejected as too heavy — and it could not be lightened, since white on it runs 9.72 at 100%, 6.43 at 85%, 4.53 at 72%, 3.35 at 60%). So the header is separated by a rule and a quieter ink instead, which costs nothing the zebra needs. A useful side effect: with no fill under it the label can go back to --text-secondary (5.48:1 on the panel). On a light band it could not — measured 4.29:1, under AA — which is why the banded versions had to use the same ink as the data, and exactly why they stopped reading as headers. */ --tbl-head: var(--bg-panel); /* The line under the header, and the only thing now marking it. Dimmed on purpose (owner's call) but not past the floor: --text-secondary at 75% measures 3.40:1 against the panel across all ten themes, and the next step down is 2.57 — under the 3:1 WCAG 1.4.11 asks of a non-text object that carries meaning. The same floor --btn-line exists for, and the same reason --border (1.24-1.90) can never carry structure by itself. Drawn 2px, so a dimmer colour still reads as deliberate. */ --tbl-head-rule: color-mix(in srgb, var(--text-secondary) 75%, var(--bg-panel)); --tbl-hover: color-mix(in srgb, var(--primary) 30%, var(--bg-panel)); /* A muted label, which is what it was before any of this — the difference is that it now sits on the panel rather than on a coloured wash. Two themes used to override this token (dark and nordic-emerald, both forcing --text-primary because a mid-grey label lost ground on a --primary wash); both are deleted along with the wash they were correcting. */ --tbl-head-ink: var(--text-secondary); --btn-line: #8A9299; --danger-line: #C67E7E; --success-line: #6F9C82; --info-line: #6E97B4; /* Categorizing panels by color — a meaning-carrying tone, not mere decoration */ --cat-clinical: #2F8F82; --cat-clinical-bg: #EAF5F3; --cat-clinical-text: #1E5F56; --cat-billing: #B8791E; --cat-billing-bg: #FBF2E3; --cat-billing-text: #8A5A14; --cat-files: #6B5B95; --cat-files-bg: #F1EEF8; --cat-files-text: #4E4170; } /* --- Theme: Clinical Teal --- */ html[data-theme="clinical"] { --primary: #4872AB; --primary-dark: #375b8b; --primary-light: #CCFBF1; --primary-text: #0F766E; --accent: #0D9488; --accent-dark: #0F766E; --bg: #F8FAFC; --bg-panel: #FFFFFF; --border: #CBD5E1; --text-primary: #0F172A; --text-secondary: #475569; } /* --- Theme: Nordic Clean --- */ html[data-theme="nordic"] { --primary: #2563EB; --primary-dark: #1D4ED8; --primary-light: #EFF6FF; --primary-text: #1E3A8A; --accent: #10B981; --accent-dark: #047857; --bg: #F1F5F9; --bg-panel: #FFFFFF; --border: #CBD5E1; --text-primary: #0F172A; --text-secondary: #475569; } /* --- Theme: Warm Pet Care --- */ html[data-theme="warm"] { --primary: #4872AB; --primary-dark: #375b8b; --primary-light: #FEF3C7; --primary-text: #92400E; --accent: #F59E0B; --accent-dark: #D97706; --bg: #FDFBF7; --bg-panel: #FFFFFF; --border: #E5E7EB; --text-primary: #1F2937; /* #6B7280 was the weakest secondary of the nine (4.83:1 on a panel) and fell to 4.12:1 on the table header band. Darkened just enough to clear AA there. */ --text-secondary: #5D646D; } /* --- Theme: Modern Dark Mode --- */ html[data-theme="dark"] { --primary: #60A5FA; --primary-dark: #3B82F6; --primary-light: #1E293B; --primary-text: #93C5FD; --accent: #FB7185; --accent-dark: #E11D48; --bg: #0F172A; --bg-panel: #1E293B; --border: #334155; --text-primary: #F8FAFC; --text-secondary: #94A3B8; --text-tertiary: #64748B; --danger-bg: #451A1A; --danger-text: #FCA5A5; --warn-bg: #422006; --warn-text: #FDE68A; --success-bg: #14321F; --success-text: #86EFAC; --info-bg: #0F2C3E; --info-text: #93C5FD; --special-bg: #2E1065; --special-text: #C4B5FD; /* The only theme whose --primary is lighter than its ground, so the action button inverts here: the light blue becomes the fill and the page ground becomes the ink (7.02:1). --primary-dark + white would be 3.68:1 and fail. */ --action-bg: var(--primary); --on-action: var(--bg); --btn-line: #6B7A90; --danger-line: #A85C5C; --success-line: #4E8A66; --info-line: #4A7EA8; --field-bg: var(--bg); --placeholder: color-mix(in srgb, var(--text-tertiary) 80%, var(--field-bg)); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* 6.96:1 */ --cat-clinical: #5FBBAA; --cat-clinical-bg: #16211F; --cat-clinical-text: #8FD9C9; --cat-billing: #D9A054; --cat-billing-bg: #241D12; --cat-billing-text: #E8BE82; --cat-files: #A594CC; --cat-files-bg: #1E1B29; --cat-files-text: #C6B8E6; } /* The knock-out filter suits the monochrome VetMan.ge wordmark. An organization's own logo is its brand and may well be coloured — inverting it would render it as a white silhouette, so .app-header-logo-org is excluded from this and from the pro-slate rule below. */ html[data-theme="dark"] .app-header-logo img:not(.app-header-logo-org), html[data-theme="dark"] .login-logo-img { filter: brightness(0) invert(1); } /* The dark theme used to set these three with !important, which changed nothing (the values were its own tokens) while blocking every future change to form controls in that theme — the same trap the table header sat in. Token-driven and theme-independent now. Deliberately not scoped to .form-group: the search box, the filter inputs and the datepicker all live outside it, and the old override covered them. Scoping this rule would have left those three white-on-dark. */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { /* background-COLOR: the shorthand would reset background-image, and `input[type="text"]` (0-1-1) outweighs `.ss-chevron-bg` (0-1-0) — which is how the searchable field lost the little arrow that says it opens. */ background-color: var(--field-bg); color: var(--text-primary); /* The border, the radius and the padding are HERE, on the element, and not only on `.form-group input`, for the same reason the chevron below is: a field whose shape depends on its parent renders as a raw browser control the moment it is used anywhere else — in a table cell, in a filter bar, in a toolbar. That failure is silent. Nothing errors, no test sees it, and it reaches the user as a row of grey rectangles with square corners. It had already happened twice: /settings/finance pasted the five declarations inline to work around it, and the clinical-codes table shipped without them at all. `.form-group input` (0-1-1, later in this file) still wins where it differs, and `.filter-search input[type="text"]` (0-2-1) keeps its merged-with-the-button shape. */ border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; font-family: inherit; } /* One arrow for every dropdown. Until now the look depended on whether the markup remembered a class: 40 selects carried `.ss-plain-select`/`.ss-chevron-bg` and got the app's chevron, the other 209 got the operating system's — which is why /contacts/create showed two different arrows on one form. A rule on the element cannot be forgotten the way a class can. `[multiple]` and `[size]` are list boxes, not dropdowns: they have no arrow to replace. */ select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } /* `.form-group select` (0-1-1) sets padding on all four sides, which would put the text back under the arrow. Stated separately rather than folded into the shared field rule, because that rule also covers inputs and textareas, which have no arrow to clear. */ .form-group select, select.field-control { padding-right: 28px; } /* ONE appearance for every closed dropdown — a native ) --- */ .ss-chevron-bg { background-image: var(--chevron); background-repeat: no-repeat; background-position: right 10px center; } /* The multi-picker's chosen values. Chips rather than a comma-joined string in the field: a visit with five coded terms has to show which five and let one of them go without retyping the rest, and a text field can do neither. */ .ss-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; } .ss-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 9px; font-size: var(--fs-micro); line-height: 1.7; background: var(--primary-light); color: var(--primary-text); border: 1px solid var(--btn-line); border-radius: 999px; } .ss-chip-x { border: 0; background: none; padding: 0 2px; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; } /* A row already chosen stays in the list, dimmed and ticked. Removing it would make the list jump under the cursor — the same reason the two-pane picker dims instead of hiding. */ /* The "none" row. Dim, because it is the absence of a choice rather than one of them — and it has to be visible: for a plain (non-searchable) select it is the ONLY way back to empty, the × being drawn for searchable ones alone. */ .ss-item.ss-item-blank { color: var(--text-tertiary); font-style: italic; } .ss-item.ss-picked { opacity: 0.62; } .ss-tick { float: right; font-weight: 700; color: var(--primary-text); } .ss-wrap { position: relative; min-width: 0; } /* Only what is specific to the searchable field: it is an , so it needs the frame the shared field rule gives a select, and a long value has to end in an ellipsis rather than scroll. Size, padding, fill and arrow all come from the shared dropdown rule above. */ .ss-wrap .ss-input { border: 1px solid var(--border); border-radius: var(--radius-md); font-family: inherit; width: 100%; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .ss-wrap.ss-open .ss-input { border-color: var(--primary); } /* The original underneath: it keeps the keyboard, the screen reader and the form submit, and the track is only its appearance. Hidden with clip rather than display:none, because a display:none input is not focusable and the whole thing would stop working for anyone not using a mouse. */ .switch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--text-secondary); cursor: pointer; padding: 4px 0; user-select: none; } /* Two toggles on one line are two separate settings, not one control with two halves — whitespace between inline-flex elements is about 4px, which reads as the second belonging to the first. `--sp-group` is the token for "these are different things". Only ever matches genuine neighbours: the three on the shop item form sit in separate sections, so nothing there moves. */ .switch + .switch { margin-left: var(--sp-group); } .switch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 20px; /* --btn-line, not --rule: this track IS the control, so it needs the 3:1 a control's boundary requires (3.16–3.35:1 across the themes). --rule measures 1.36–1.51:1, which is right for a hairline between table rows and leaves an off switch nearly invisible. */ background: var(--btn-line); transition: background-color .15s ease; } .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-panel); transition: transform .15s ease; } .switch:hover .switch-track { background: var(--text-secondary); } .switch input:checked ~ .switch-track { background: var(--action-bg); } .switch input:checked ~ .switch-track::after { transform: translateX(14px); } .switch input:checked ~ .switch-label { color: var(--text-primary); font-weight: 700; } .switch input:focus-visible ~ .switch-track { outline: 2px solid var(--action-bg); outline-offset: 2px; } .switch-label { display: inline-flex; align-items: center; gap: 6px; /* Declared here rather than inherited from .switch. Inside a .form-group the caption rule `.form-group label` (0-1-1) outweighs `.switch` (0-1-0) and lands on the wrapping