/* Global application styles. Loaded after css/tokens.css, so everything here reads --app-* / --bs-* tokens rather than literal values. Anything that only styles one component belongs in that component's scoped .razor.css file, not here. */ /* Root font-size is the browser default again (finding L3). This file used to declare `html, body { font-size: 14px }`, which put the whole app 12.5% below the 16px baseline every rem value in vendored Bootstrap is authored against: .btn padding, .form-control height, grid gutters and the spacing utilities all silently shrank, and nothing in the app was ever designed at those sizes. Sizing is now explicit instead: the root is 16px and anything that wants to be smaller says so with a token. 16px rather than 100%: 100% resolves to the browser's configured default font size, which is not always 16 (a reader who has raised it to 20px would get an app 25% larger than every rem in Bootstrap assumes - the same class of bug in the other direction). Page zoom still scales everything. */ html { font-size: 16px; } body { font-family: var(--app-font-sans); font-size: var(--app-font-size-base); line-height: var(--app-line-height); } /* Heading scale. Bootstrap's own headings are hardcoded rem values (h1 2.5rem .. h6 1rem) that were only ever tolerable because the root was 14px; at a true 16px root they are far too large for a dense financial UI. Restate them from the 5-step scale so the sizes are a decision rather than a side effect. */ h1 { font-size: var(--app-font-size-2xl); } h2 { font-size: var(--app-font-size-xl); } h3 { font-size: var(--app-font-size-lg); } h4, h5 { font-size: var(--app-font-size-base); } h6 { font-size: var(--app-font-size-sm); } h1:focus { outline: none; } /* Tables carry the most text per pixel, so they take the small step. */ table { font-size: var(--app-font-size-sm); } /* The one page-width container (finding U2). The navbar used Bootstrap's .container-fluid (edge to edge, 0.75rem gutter) while the content wrapper used max-width: 1600px + margin auto + .px-4. The two left edges therefore never matched, and above 1600px the gap grew with the viewport - 65.5px apart at 1710px. Both now use this class, so the brand and the page

line up by construction rather than by coincidence, at every viewport width. It is global rather than scoped because two components share it (NavMenu and MainLayout) and scoped .razor.css cannot cross that boundary. */ .app-container { width: 100%; max-width: var(--app-max-width); margin-inline: auto; padding-inline: var(--app-gutter); } /* Bootstrap gives the navbar's inner element its flex layout by matching the literal .container/.container-fluid class names, so replacing that class means restating the rule here. */ .navbar > .app-container { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; } /* Numeric cells and inputs. Right-aligned *and* tabular. Without font-variant-numeric the proportional digits of the body font give every glyph its own width, so a money column stays ragged at the decimal separator even when the column is right-aligned - and `tabular-nums` appeared nowhere in this codebase. Apply .num to any cell, input or figure holding an amount. */ .num { text-align: right; font-variant-numeric: tabular-nums; } /* Bootstrap 5.3 reads --bs-primary for utilities, links and focus rings, but the button variants still bake the literal hex into their own --bs-btn-* block. Re-point those at the token so a brand change stays a one-line edit in tokens.css instead of an override war here (finding H2). */ .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-color: var(--app-on-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-active); --bs-btn-hover-color: var(--app-on-primary); --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active); --bs-btn-active-color: var(--app-on-primary); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-disabled-color: var(--app-on-primary); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-hover-color: var(--app-on-primary); --bs-btn-active-bg: var(--app-primary); --bs-btn-active-border-color: var(--app-primary); --bs-btn-active-color: var(--app-on-primary); --bs-btn-disabled-color: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); } /* Blazor's EditForm validation classes. */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--bs-form-valid-border-color); } .invalid { outline: 1px solid var(--bs-form-invalid-border-color); } .validation-message { color: var(--bs-form-invalid-color); } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: var(--app-space-3) var(--app-space-5); position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--app-space-3); top: var(--app-space-2); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: var(--app-space-4) var(--app-space-4) var(--app-space-4) 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* Boot splash. Rendered by index.html before the .NET runtime starts, so it can only rely on tokens.css and this file - no scoped component styles yet. */ .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--app-primary); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }