/* ── Theme CSS variables ── */
/* Default (light) theme. Component styles should reference these variables instead of
hard-coded color literals so that switching to .theme-dark on flips the palette. */
:root {
--color-bg: #ffffff;
--color-bg-muted: #f9fafb;
--color-bg-raised: #ffffff;
--color-text: #1d2939;
--color-text-muted: #6b7280;
--color-text-subtle: #9ca3af;
--color-border: #e5e7eb;
--color-border-strong: #d1d5db;
--color-accent: #2563eb;
--color-accent-hover: #1d4ed8;
--color-accent-soft: #dbeafe;
--color-danger: #dc2626;
--color-danger-soft: #fef2f2;
--color-success: #16a34a;
--color-success-soft: #f0fdf4;
--color-warning: #f59e0b;
--color-warning-soft: #fffbeb;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html.theme-dark, .theme-dark {
--color-bg: #0f172a;
--color-bg-muted: #1e293b;
--color-bg-raised: #1e293b;
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-text-subtle: #64748b;
--color-border: #334155;
--color-border-strong: #475569;
--color-accent: #60a5fa;
--color-accent-hover: #93c5fd;
--color-accent-soft: rgba(96, 165, 250, 0.15);
--color-danger: #f87171;
--color-danger-soft: rgba(248, 113, 113, 0.12);
--color-success: #4ade80;
--color-success-soft: rgba(74, 222, 128, 0.12);
--color-warning: #fbbf24;
--color-warning-soft: rgba(251, 191, 36, 0.12);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
html.theme-dark body {
background: var(--color-bg);
color: var(--color-text);
}
html.theme-dark img[src*="logo"] {
filter: brightness(1.1);
}
html, body {
height: 100%;
margin: 0;
/* Guard against any descendant overflowing the viewport horizontally.
`clip` (vs `hidden`) avoids creating a scroll container, so it doesn't
break `position: sticky` on the header. */
overflow-x: clip;
max-width: 100vw;
}
/* ── Header brand logo ──
Rendered inside FodHeader's LogoTemplate slot. Global rule (not scoped) so
it survives whatever DOM wrapping FodHeader applies to the slot content.
`min-width` keeps the brand area from collapsing when AppName is empty. */
.oda-brand__logo {
height: 36px;
width: auto;
min-width: 120px;
object-fit: contain;
}
/* ── Badge utilities ──
Status pill / tag / chip used across pages (status, eligibility, count).
Use as `…`.
Tones: success, info, warning, danger, neutral, accent. */
.badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.2;
white-space: nowrap;
}
.badge--success { background: #dcfce7; color: #166534; }
.badge--info { background: #dbeafe; color: #1d4ed8; }
.badge--warning { background: #fef3c7; color: #92400e; }
.badge--danger { background: #fee2e2; color: #991b1b; }
.badge--neutral { background: #f3f4f6; color: #6b7280; }
.badge--accent { background: #e0e7ff; color: #3730a3; }
/* ── Card utilities ──
Opaque panel with thin gray border. Use as `…
`.
Modifiers: --muted (gray fill for inset info panels), --hoverable (interactive). */
.card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 20px;
}
.card--muted {
background: #f8fafc;
border-color: #e2e8f0;
}
.card--hoverable {
transition: border-color 0.15s, box-shadow 0.15s;
cursor: pointer;
}
.card--hoverable:hover {
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* ── Outline button utility ──
Use for secondary actions (download, cancel, dismiss). Pair with `.btn-outline--sm`
when the button needs to be denser. Colored variants are page-specific and stay
in component CSS. */
.btn-outline {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid #d0d5dd;
border-radius: 6px;
color: #344054;
font-size: 14px;
font-weight: 500;
padding: 6px 12px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-outline:hover {
background: #f3f4f6;
color: #1f2937;
text-decoration: none;
}
.btn-outline--sm {
padding: 4px 10px;
font-size: 13px;
}
/* ── Form grid utility ──
Two-column form section. Wrap fields in `.form-grid` and mark full-width
ones with `.form-grid__full`. Use `.form-grid--compact` for tighter spacing. */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-grid--compact {
gap: 12px;
}
.form-grid__full {
grid-column: 1 / -1;
}
@media (max-width: 600px) {
.form-grid {
grid-template-columns: 1fr;
}
}
/* Tabs: remove focus outline on click, keep for keyboard */
.tabs .tab-button:focus {
outline: none !important;
}
.tabs .tab-button:focus-visible {
outline: 3px solid var(--blue-sky-600, #0058D2) !important;
outline-offset: 2px;
}
/* Unauthenticated state */
.unauthenticated-message {
text-align: center;
max-width: 400px;
/* Self-center inside the column-flex .public-content (margin: auto works on flex children) */
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.unauthenticated-icon {
width: 64px;
height: 64px;
color: var(--gray-400, #9ca3af);
margin-bottom: 24px;
}
.unauthenticated-message h2 {
font-size: 24px;
font-weight: 600;
color: var(--gray-900, #111827);
margin: 0 0 12px;
}
.unauthenticated-message p {
font-size: 16px;
color: var(--gray-500, #6b7280);
margin: 0 0 32px;
line-height: 1.5;
}
.unauthenticated-message a,
.unauthenticated-message a:hover {
text-decoration: none;
}
.unauthenticated-message .fod-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
border: none;
cursor: pointer;
color: #fff;
background-color: var(--blue-700, #1d4ed8);
transition: background-color 0.15s;
}
.unauthenticated-message .fod-btn:hover {
background-color: var(--blue-800, #1e40af);
}
/* Not Found page */
.not-found-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
min-height: 400px;
}
.not-found-page h1 {
font-size: 28px;
font-weight: 700;
color: #1f2937;
margin: 0 0 16px;
}
.not-found-page p {
font-size: 15px;
color: #6b7280;
margin: 0 0 12px;
line-height: 1.6;
}
.not-found-code {
font-size: 13px;
color: #9ca3af;
margin-bottom: 32px;
}
.not-found-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.not-found-contact {
font-size: 14px;
color: #2563eb;
text-decoration: underline;
}
.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;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}