/* ============================================================================ EHS design system — the one place to change global style. Layered on Bootstrap 5: tokens map onto --bs-* vars so cards, tables, badges, buttons and forms inherit them. ============================================================================ */ /* Global top progress bar (LoadingBar island). A thin fixed bar that trickles toward the top of the viewport while the app is busy or navigating, so a click always gets immediate feedback. */ .app-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, #1857b8, #4a90e2); box-shadow: 0 0 8px rgba(24, 87, 184, 0.5); opacity: 0; pointer-events: none; transition: width 0.4s ease, opacity 0.3s ease; } .app-progress--on { width: 92%; opacity: 1; /* Slow trickle toward the end so a long load keeps visibly progressing. */ transition: width 8s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.2s ease; } @media (prefers-reduced-motion: reduce) { .app-progress { transition: opacity 0.2s ease; width: 92%; } /* WCAG 2.3.3 — no non-essential motion: neutralize the statcard lift and the nav caret spin. */ .ehs-statcard { transition: none; } .ehs-statcard:hover { transform: none; } .nav-group-caret { transition: none; } } :root { /* Spacing (4px base) */ --ehs-space-1: .25rem; --ehs-space-2: .5rem; --ehs-space-3: .75rem; --ehs-space-4: 1rem; --ehs-space-5: 1.5rem; --ehs-space-6: 2rem; /* Typography */ --ehs-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ehs-text-xs: .75rem; --ehs-text-sm: .8125rem; --ehs-text-xl: 1.6rem; /* page h1 */ --ehs-text-2xl: 2.1rem; /* stat numbers */ --ehs-weight-medium: 500; --ehs-weight-semibold: 600; /* Colour — professional blue brand + slate neutrals */ --ehs-brand: #1857b8; --ehs-brand-hover: #14488f; --ehs-link: #1857b8; --ehs-bg: #f4f6f9; /* page background */ --ehs-bg-subtle: #f8fafc; /* row hover / header tint */ --ehs-surface: #ffffff; /* cards */ --ehs-border: #e3e8ef; /* decorative dividers (cards/tables) */ --ehs-border-control: #8a94a6; /* interactive-control borders — ≥3:1 on white (WCAG 1.4.11) */ --ehs-text: #1f2a37; --ehs-text-muted: #556072; /* Radius + elevation */ --ehs-radius: .65rem; --ehs-radius-sm: .375rem; --ehs-shadow-sm: 0 1px 2px rgba(16,24,40,.05); --ehs-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --ehs-shadow-md: 0 6px 18px rgba(16,24,40,.10); /* Sidebar (flat — the old hardcoded gradient is gone; each palette brings its own tone). */ --ehs-sidebar-bg: #16305e; /* Bridge to Bootstrap. */ --bs-body-bg: var(--ehs-bg); --bs-body-color: var(--ehs-text); --bs-body-font-size: .9375rem; --bs-border-color: var(--ehs-border); --bs-border-radius: var(--ehs-radius-sm); --bs-border-radius-lg: var(--ehs-radius); --bs-card-border-radius: var(--ehs-radius); --bs-card-border-color: var(--ehs-border); --bs-link-color: var(--ehs-link); --bs-link-hover-color: var(--ehs-brand-hover); --bs-primary: var(--ehs-brand); } /* ============================================================================ Themes — mode (light/dark/system) × palette (accent + sidebar), picked at /preferences. theme.js stamps data-ehs-mode / data-ehs-palette / data-ehs-density on BEFORE first paint (localStorage), and mirrors the mode to data-bs-theme so Bootstrap's own components follow. Palettes only move the accent + sidebar tokens; neutrals move with the mode. ============================================================================ */ html[data-ehs-palette="slate"] { --ehs-brand:#3f4f68; --ehs-brand-hover:#2f3c50; --ehs-link:#41608f; --ehs-sidebar-bg:#171e2a; } html[data-ehs-palette="evergreen"] { --ehs-brand:#157347; --ehs-brand-hover:#0f5c38; --ehs-link:#146c43; --ehs-sidebar-bg:#12372a; } html[data-ehs-palette="plum"] { --ehs-brand:#6f42c1; --ehs-brand-hover:#59359c; --ehs-link:#6b3fba; --ehs-sidebar-bg:#2c1a4e; } html[data-ehs-palette="ember"] { --ehs-brand:#c2410c; --ehs-brand-hover:#9a3412; --ehs-link:#b45309; --ehs-sidebar-bg:#3a1c10; } html[data-ehs-mode="dark"] { --ehs-bg: #10151f; --ehs-bg-subtle: #151c29; --ehs-surface: #182031; --ehs-border: #2b3547; --ehs-border-control: #55627a; /* ≥3:1 on the dark surface (WCAG 1.4.11) */ --ehs-text: #e7ebf2; --ehs-text-muted: #97a3b6; /* Accents brighten so they stay legible on dark grounds, whatever the palette. */ --ehs-link: color-mix(in srgb, var(--ehs-brand) 50%, #dbe7ff); --ehs-brand-hover: color-mix(in srgb, var(--ehs-brand) 70%, white); --ehs-shadow-sm: 0 1px 2px rgba(0,0,0,.45); --ehs-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.35); --ehs-shadow-md: 0 6px 18px rgba(0,0,0,.55); } /* Density — "compact" tightens tables + page padding for data-heavy users. */ html[data-ehs-density="compact"] .table > :not(caption) > * > * { padding: .35rem .5rem; } html[data-ehs-density="compact"] .content { padding-top: 1rem; } html, body { font-family: var(--ehs-font-sans); background-color: var(--ehs-bg); color: var(--ehs-text); font-size: .9375rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } a, .btn-link { color: var(--ehs-link); text-decoration: none; } a:hover { color: var(--ehs-brand-hover); } /* ---- Skip link (WCAG 2.4.1) — visually hidden until focused, then pinned top-left above all chrome. ---- */ .skip-link { position: absolute; left: .5rem; top: -3.5rem; z-index: 3000; padding: .5rem .9rem; background: var(--ehs-brand); color: #fff; font-weight: var(--ehs-weight-medium); border-radius: var(--ehs-radius-sm); box-shadow: var(--ehs-shadow-md); } .skip-link:focus, .skip-link:focus-visible { top: .5rem; color: #fff; outline: 2px solid #fff; outline-offset: 2px; } /* ---- Page content area ---- */ .content { padding: 1.6rem 2rem 3rem; max-width: 1500px; } /* ---- Headings ---- */ h1 { font-size: var(--ehs-text-xl); font-weight: 700; letter-spacing: -.012em; color: var(--ehs-text); } /* Suppress the outline only for programmatic (non-keyboard) focus; keyboard focus still shows via :focus-visible. */ h1:focus:not(:focus-visible) { outline: none; } h5, h6 { font-weight: var(--ehs-weight-semibold); color: var(--ehs-text); } h5 { font-size: 1.05rem; } h6 { font-size: .9rem; } /* ---- Cards ---- */ .card { background: var(--ehs-surface); border: 1px solid var(--ehs-border); border-radius: var(--ehs-radius); box-shadow: var(--ehs-shadow); } .card-header { background: var(--ehs-surface); border-bottom: 1px solid var(--ehs-border); font-weight: var(--ehs-weight-semibold); padding: .75rem 1rem; } /* ---- Tables (every DynamicTable + raw page tables) ---- */ .table { --bs-table-bg: transparent; margin-bottom: 0; } .table > :not(caption) > * > * { padding: .6rem .75rem; } .ehs-table thead th, .table thead th { font-size: var(--ehs-text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--ehs-text-muted); font-weight: var(--ehs-weight-semibold); border-bottom: 1px solid var(--ehs-border); background: var(--ehs-bg-subtle); white-space: nowrap; } .ehs-table tbody tr { border-top: 1px solid var(--ehs-border); } .ehs-table tbody tr:hover { background: var(--ehs-bg-subtle); } .ehs-table tbody tr.ehs-row-link { cursor: pointer; } /* ---- Buttons ---- */ .btn { border-radius: var(--ehs-radius-sm); font-weight: var(--ehs-weight-medium); } .btn-primary { color: #fff; background-color: var(--ehs-brand); border-color: var(--ehs-brand); } .btn-primary:hover, .btn-primary:active { background-color: var(--ehs-brand-hover); border-color: var(--ehs-brand-hover); } .btn-sm { font-size: var(--ehs-text-sm); } /* Outline buttons: Bootstrap's own --bs-btn-* vars ignore --bs-primary and ship literal colours that fail 4.5:1 (primary #0d6efd = 4.15, secondary #6c757d = 4.33 light / 3.47 dark). Re-point them at accessible tokens (WCAG 1.4.3). Solid brand tokens clear ≥4.5:1 as text-on-white in every palette. */ .btn-outline-primary { --bs-btn-color: var(--ehs-brand); --bs-btn-border-color: var(--ehs-brand); --bs-btn-hover-bg: var(--ehs-brand); --bs-btn-hover-border-color: var(--ehs-brand); --bs-btn-active-bg: var(--ehs-brand-hover); --bs-btn-active-border-color: var(--ehs-brand-hover); } .btn-outline-secondary { --bs-btn-color: #565e64; /* ~5.4:1 on white */ --bs-btn-border-color: #767f8a; --bs-btn-hover-bg: #565e64; --bs-btn-hover-border-color: #565e64; } /* The other coloured outline variants ship the same failing Bootstrap literals (success #198754=4.18, danger #dc3545=4.0, warning #ffc107=1.6, info #0dcaf0=1.9). Darken the text/border to ≥4.5:1 on the page ground; hover fills with the same colour under white text. */ .btn-outline-success { --bs-btn-color:#146c43; --bs-btn-border-color:#146c43; --bs-btn-hover-bg:#146c43; --bs-btn-hover-border-color:#146c43; } .btn-outline-danger { --bs-btn-color:#b02a37; --bs-btn-border-color:#b02a37; --bs-btn-hover-bg:#b02a37; --bs-btn-hover-border-color:#b02a37; } .btn-outline-warning { --bs-btn-color:#8a6400; --bs-btn-border-color:#8a6400; --bs-btn-hover-bg:#8a6400; --bs-btn-hover-border-color:#8a6400; --bs-btn-hover-color:#fff; } .btn-outline-info { --bs-btn-color:#087990; --bs-btn-border-color:#087990; --bs-btn-hover-bg:#087990; --bs-btn-hover-border-color:#087990; --bs-btn-hover-color:#fff; } /* ---- Forms ---- */ .form-control, .form-select { border-radius: var(--ehs-radius-sm); border-color: var(--ehs-border-control); } .form-check-input { border-color: var(--ehs-border-control); } .form-label { font-weight: var(--ehs-weight-medium); color: var(--ehs-text); margin-bottom: .25rem; } /* ---- Badges / status pills ---- */ .badge { font-weight: var(--ehs-weight-semibold); } .badge.rounded-pill { padding: .35em .7em; } /* ---- Alerts ---- */ .alert { border-radius: var(--ehs-radius); } /* Links inside alerts inherit the alert's high-contrast text colour and are underlined, so they're distinguishable from surrounding text by more than colour (WCAG 1.4.1) and clear contrast (fixes the axe link-in-text-block on inline alert links). */ .alert a:not(.btn) { color: inherit; text-decoration: underline; font-weight: var(--ehs-weight-semibold); } /* Sidebar muted text: Bootstrap .text-white-50 (#fff @ 50%) is only ~4.45:1 on the navy sidebar. Bump to 75% so "Organization: …" and similar clear 4.5:1 (WCAG 1.4.3). */ .sidebar .text-white-50 { color: rgba(255, 255, 255, .78) !important; } /* Dark mode: outline-button text must be a LIGHTENED accent on the dark surface (the solid brand token is too dark as text on #182031). --ehs-link is the dark-mode lightened accent; muted text clears ~6:1. */ html[data-ehs-mode="dark"] .btn-outline-primary { --bs-btn-color: var(--ehs-link); --bs-btn-border-color: var(--ehs-link); --bs-btn-hover-bg: var(--ehs-link); --bs-btn-hover-border-color: var(--ehs-link); --bs-btn-hover-color: #0b1220; } html[data-ehs-mode="dark"] .btn-outline-secondary { --bs-btn-color: var(--ehs-text-muted); --bs-btn-border-color: var(--ehs-text-muted); --bs-btn-hover-bg: var(--ehs-text-muted); --bs-btn-hover-border-color: var(--ehs-text-muted); --bs-btn-hover-color: #0b1220; } /* Dark mode: lightened success/danger/warning/info so outline text clears ≥4.5:1 on the dark surface. */ html[data-ehs-mode="dark"] .btn-outline-success { --bs-btn-color:#75b798; --bs-btn-border-color:#75b798; --bs-btn-hover-bg:#75b798; --bs-btn-hover-border-color:#75b798; --bs-btn-hover-color:#0b1220; } html[data-ehs-mode="dark"] .btn-outline-danger { --bs-btn-color:#ea868f; --bs-btn-border-color:#ea868f; --bs-btn-hover-bg:#ea868f; --bs-btn-hover-border-color:#ea868f; --bs-btn-hover-color:#0b1220; } html[data-ehs-mode="dark"] .btn-outline-warning { --bs-btn-color:#ffda6a; --bs-btn-border-color:#ffda6a; --bs-btn-hover-bg:#ffda6a; --bs-btn-hover-border-color:#ffda6a; --bs-btn-hover-color:#0b1220; } html[data-ehs-mode="dark"] .btn-outline-info { --bs-btn-color:#6edff6; --bs-btn-border-color:#6edff6; --bs-btn-hover-bg:#6edff6; --bs-btn-hover-border-color:#6edff6; --bs-btn-hover-color:#0b1220; } /* ---- Clickable KPI tiles (StatCard) ---- */ .ehs-statcard { color: inherit; transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease; } .ehs-statcard:hover { box-shadow: var(--ehs-shadow-md); transform: translateY(-1px); border-color: #c7d2e4; } .ehs-filterbar .form-label { margin-bottom: .1rem; font-size: var(--ehs-text-xs); color: var(--ehs-text-muted); } /* ---- Focus ring (WCAG 2.4.7 / 1.4.11) — a palette-driven :focus-visible outline that clears ≥3:1 against any surface, applied broadly. Replaces the old faint ~1.3:1 blue box-shadow. ---- */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .nav-link:focus-visible, .nav-group-summary:focus-visible, .ehs-statcard:focus-visible, .ehs-row-link:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ehs-brand); outline-offset: 2px; } /* Form fields keep their brand border on focus; the outline above is the visible ring (no faint shadow). */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ehs-brand); box-shadow: none; } /* ---- Grouped side-nav (collapsible
sections) ---- */ .nav-group { border: none; } .nav-group > .nav-group-summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; padding: .5rem 1.25rem .35rem; margin-top: .35rem; color: rgba(255, 255, 255, .55); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .nav-group > .nav-group-summary::-webkit-details-marker { display: none; } .nav-group > .nav-group-summary:hover { color: rgba(255, 255, 255, .9); } .nav-group-caret { margin-left: auto; font-size: .7rem; transition: transform .15s ease; } .nav-group[open] > .nav-group-summary > .nav-group-caret { transform: rotate(180deg); } .nav-group .nav-item .nav-link { padding-left: 2.6rem; font-size: .9rem; } /* ---- Validation (functional) ---- */ .valid.modified:not([type=checkbox]) { outline: 1px solid #1a7f37; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--ehs-radius); } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ---- WorkerPicker inside responsive tables ---- */ /* .table-responsive is an overflow container, which clips the picker's position:absolute suggestion list on the last rows. While a picker's dropdown is open, lift the clipping so it overlays the table instead of being cut off (the horizontal scroll returns the moment the dropdown closes). */ .table-responsive:has(.worker-picker .list-group) { overflow: visible; }