/* ──────────────────────────────────────────────────────────────────────────
SYSTEM TYPOGRAPHY — single source of truth
---------------------------------------------------------------------------
One UI font (Inter) and one monospace (JetBrains Mono, for codes / reference
numbers), both self-hosted from wwwroot/fonts so the app renders identically
offline and on-prem with no Google Fonts round-trip. Every page should use
the var(--tb-font-*) tokens or `inherit` — never a hardcoded family — so the
whole system stays on one typeface. Sizes come from the --fs-* scale below.
Inter and JetBrains Mono are variable fonts: one file spans weights 100–900,
so `font-weight` works continuously without extra @font-face rules.
────────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('/fonts/JetBrainsMono.woff2') format('woff2');
}
/* Branding wordmark only (the "Truebooks" logo on login/landing). Self-hosted so
those pages no longer reach out to Google Fonts. Not a UI font — never use it
for body text. */
@font-face {
font-family: 'Michroma';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/Michroma.woff2') format('woff2');
}
:root {
/* The two families every page should reference. The fallbacks cover the
brief moment before the woff2 loads and any glyph Inter lacks. */
--tb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--tb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Type scale (all rem, so relative to the 16px root below). */
--fs-xs: 0.8125rem; /* 13px — captions, meta, chips */
--fs-sm: 0.875rem; /* 14px — dense table cells */
--fs-base: 1rem; /* 16px — body, inputs, buttons (default) */
--fs-lg: 1.0625rem; /* 17px — section titles */
--fs-h3: 1.1875rem; /* 19px */
--fs-h2: 1.3125rem; /* 21px */
--fs-h1: 1.5rem; /* 24px — page headings */
}
/* Root font-size is the master density control. `rem` is relative to the ROOT,
so scaling proportionally resizes every rem-based dimension across the
whole app — the MudBlazor type scale and our --fs-* tokens included. We run it
at 93.75% = 15px (down from the 16px browser default) for a denser, less
"Material-airy" layout without touching a single component.
THE ONE RULE that keeps this safe and non-compounding: body must stay at
EXACTLY 1rem. An earlier attempt set html to 0.875rem *and* left body on a
sub-1rem --fs-base, so the two multiplied down to ~12px (the whole UI ~15% too
small). As long as --fs-base is 1rem (above), body resolves to the root size
with no compounding and the scale is a single clean multiplier.
Adjust app density HERE and nowhere else. */
html { font-size: 93.75%; } /* 15px base (was 16px = 100%) */
body {
font-family: var(--tb-font-sans);
font-size: var(--fs-base); /* MUST remain 1rem — see note above */
}
/* Numbers in data tables line up in columns (tabular figures). Inter ships
proportional figures by default, which makes amount columns look ragged. */
table, .mud-table, .mud-table-cell, .eva-num, .apl-num, [class*="-num"] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ──────────────────────────────────────────────────────────────────────────
DENSITY PASS (step 2) — trims MudBlazor's default Material spacing app-wide so
forms, dialogs, grids and the nav rail read tighter. Pairs with the 15px root
above. Presentation-only: no component/API changes, and reversible by deleting
this block to restore stock MudBlazor spacing.
Deliberately scoped: only VERTICAL padding is cut (row height is the "air"),
horizontal padding is left intact so columns/labels don't cramp; and inputs
are left alone, since squeezing their internals misaligns labels/adornments.
────────────────────────────────────────────────────────────────────────── */
/* Table rows — the single biggest source of Material airiness. */
.mud-table-cell { padding-top: 7px !important; padding-bottom: 7px !important; }
.mud-table-dense-row .mud-table-cell { padding-top: 4px !important; padding-bottom: 4px !important; }
/* Content cards / panels. */
.mud-card-content { padding: 12px 14px !important; }
.mud-expand-panel-text { padding: 10px 14px !important; }
/* Dropdown rows, menus and nav sub-lists. */
.mud-list-item { padding-top: 6px !important; padding-bottom: 6px !important; }
/* Left navigation rail rows. */
.mud-nav-link { padding-top: 7px !important; padding-bottom: 7px !important; }
/* Ensure MudSelect/MudAutocomplete popovers and date pickers always appear above MudDialog */
.mud-popover {
z-index: 9999 !important;
}
/* GLOBAL POPUP RULE — a dialog must never push its action row off-screen.
These used to be `overflow: visible !important` so dropdowns could escape the
dialog's clipping context. Side effect: a dialog taller than the viewport could
not scroll, so its Cancel/Save row spilled below the fold and became unreachable
(reported as "the Cancel/Save buttons don't work"). Individual dialogs were being
patched one at a time with an inner max-height wrapper; this fixes it for all of
them at once.
Cap the dialog to the viewport and scroll ONLY the content area, so the title and
the DialogActions row (Cancel/Save) stay pinned and clickable at any screen size.
Dropdowns/date-pickers are unaffected: MainLayout renders ,
so MudBlazor v7 places popovers at the document root, not inside the dialog. */
.mud-dialog {
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
}
.mud-dialog-content {
overflow-y: auto !important;
flex: 1 1 auto;
min-height: 0;
}
/* Title and action rows never shrink or scroll away. */
.mud-dialog > .mud-dialog-title,
.mud-dialog > .mud-dialog-actions {
flex-shrink: 0;
}
.cursor-pointer {
cursor: pointer;
}
.mud-nav-link.active {
background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
border-left: 4px solid var(--mud-palette-primary);
}
.mud-drawer-content {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 64px);
}
.mud-main-content {
overflow-y: auto;
height: calc(100vh - 64px);
padding-bottom: 24px;
}
.mud-nav-menu {
overflow-y: auto;
overflow-x: hidden;
}
.action-icons-wrap {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 160px;
align-items: center;
}
.action-icons-wrap .mud-icon-button {
flex-shrink: 0;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
max-height: 30px;
padding-top: 4px;
padding-bottom: 4px;
}
input[type="number"] {
text-align: right;
}
/* The "dd/mm/yyyy" hint in an empty date field is drawn by the BROWSER, not by
us — a native date input has no placeholder attribute to set. text-transform
does inherit into Chrome's internal date-field parts, so this is what turns
the hint into DD/MM/YYYY. Cosmetic only: once a date is chosen the field
shows digits and separators, which uppercase leaves untouched. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
text-transform: uppercase;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
background-color: var(--mud-palette-primary, #1976d2);
color: var(--mud-palette-primary-text, #fff);
border: none;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.btn-primary:hover:not(:disabled) {
opacity: 0.88;
}
.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
background-color: #6c757d;
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.btn-secondary:hover:not(:disabled) {
opacity: 0.88;
}
.btn-secondary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
color: inherit;
transition: background-color 0.2s ease;
}
.btn-icon:hover:not(:disabled) {
background-color: rgba(0, 0, 0, 0.08);
}
.btn-icon:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ── MudBlazor outlined input label — white patch fix ───────────────────────
The floating label on Variant.Outlined MudTextField/MudSelect needs a
background colour to cover the fieldset border behind it. Without an
explicit value the browser falls back to white, which shows as a bright
patch on any non-white surface (dialogs, cards, coloured panels, etc.).
Using --mud-palette-surface (= #fff in the default light theme) keeps the
label invisible on white backgrounds and lets per-page overrides work via
a single CSS variable. */
.mud-input-label-outlined {
background-color: var(--mud-palette-surface, #fff);
padding: 0 4px;
}
/* The