`. html.light block dropped entirely — this module no longer carries its own color palette at all. Every --bg-*/--text-*/--state-*/--font-*/--type-*/ --space-*/--radius-* token below was DELETED on purpose: EmpApp's own wwwroot/css/tokens.css already defines identically-named tokens that respond to the app's real light/dark toggle ([data-theme="dark"] / prefers-color-scheme), so `.fc-root`'s var(--bg-canvas) etc. now simply inherit those from the surrounding page instead of a hardcoded FuelControl value — the module now matches the rest of the app in both themes automatically. Only truly FuelControl-specific tokens with no EmpApp equivalent (chart accent colors, font weights) are kept below, and --accent-tool is aliased to EmpApp's own brand accent instead of FuelControl's original blue. The original `html, body { ... }` rule was folded into .fc-root's own declarations instead of touching the shared /, which the rest of EmpApp also relies on. */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .fc-root { /* ── Data ramp (charts only) — no EmpApp equivalent, kept as-is ── */ --data-critical: var(--state-danger); --data-mid: var(--accent-empapp); --data-historical: #1E3A5F; /* ── Font weights — EmpApp's tokens.css doesn't define these ── */ --weight-regular: 400; --weight-medium: 500; /* ── Tool identity — aliased to EmpApp's own brand accent, not FuelControl's own blue ── */ --accent-tool: var(--accent-empapp); /* ── Chart accent colors — module-specific, no EmpApp equivalent ── */ --chart-multi-refuel: #85B7EB; --chart-fuel-diff: #5DCAA5; --chart-distance: #EF9F27; --chart-tank-fill: #B4B2A9; --chart-bg: var(--bg-surface); --chart-surface: var(--bg-elevated); --chart-text: var(--text-muted); --chart-grid: var(--bg-divider); /* Folded in from the original `html, body { ... }` rule — scoped to this wrapper instead of the shared /. Values now come from EmpApp's own inherited tokens, not a local override. */ background: var(--bg-canvas); color: var(--text-body); font-family: var(--font-sans); font-size: 14px; min-height: 100%; &, *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } a { color: var(--state-brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Layout ── */ .layout-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .main-content { flex: 1; padding: var(--space-xl) var(--space-2xl); } /* ── Screen Header ── */ .screen-header { border-top: 3px solid var(--accent-tool); border-bottom: 1px solid var(--bg-divider); background: var(--bg-surface); padding: var(--space-lg) var(--space-2xl); position: sticky; top: 0; z-index: 100; } .signature-row { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); } .tool-signature { font-size: var(--type-eyebrow); font-weight: 700; letter-spacing: 0.05em; line-height: 1; } .tool-signature .sig-main { color: var(--text-primary); } .tool-signature .sig-accent { color: var(--accent-tool); font-family: var(--font-mono); } .divider-vertical { width: 1px; height: 14px; background: var(--bg-elevated); display: inline-block; } .tool-tagline { font-size: var(--type-eyebrow); letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; } /* ── CrossFuel wordmark ── */ .tool-wordmark { line-height: 1; } .wordmark-main { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .wordmark-cross { color: var(--text-primary); } .wordmark-fuel { color: #9B1C1C; } .wordmark-sub { font-size: 10px; letter-spacing: 0.22em; font-weight: var(--weight-medium); color: var(--text-muted); text-transform: uppercase; margin-top: 3px; } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xl); } .title-row .left { flex: 1; } .title-row .right { text-align: right; } .eyebrow { font-size: var(--type-eyebrow); letter-spacing: 0.15em; font-weight: var(--weight-medium); text-transform: uppercase; color: var(--accent-tool); margin-bottom: var(--space-xs); } .entity-name { font-size: var(--type-heading); font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.2; } .header-meta { font-size: var(--type-body); color: var(--text-muted); margin-top: var(--space-xs); } .display-number { font-size: var(--type-display-lg); font-weight: var(--weight-medium); color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 0.95; } .trajectory { font-size: var(--type-body); color: var(--text-muted); margin-top: var(--space-xs); } /* ── KPI Grid ── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); } .kpi-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-lg) 18px; border-left: 3px solid var(--bg-elevated); } .kpi-card--danger { background: var(--state-danger-bg); border-left-color: var(--state-danger); } .kpi-card--warn { background: var(--state-warn-bg); border-left-color: var(--state-warn); } .kpi-card--ok { background: var(--state-ok-bg); border-left-color: var(--state-ok); } .kpi-card--brand { background: var(--state-brand-bg); border-left-color: var(--state-brand); } .kpi-card--neutral { border-left-color: var(--bg-elevated); } .kpi-eyebrow { font-size: var(--type-eyebrow); letter-spacing: 0.15em; font-weight: var(--weight-medium); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-xs); } .kpi-value { font-size: 28px; font-weight: var(--weight-medium); color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 1.1; } .kpi-value .unit { font-size: var(--type-body-lg); font-weight: var(--weight-regular); color: var(--text-muted); margin-left: 2px; } .kpi-delta { font-size: var(--type-body); color: var(--text-muted); margin-top: var(--space-xs); font-variant-numeric: tabular-nums; } .kpi-meta { font-size: var(--type-body); color: var(--text-subtle); margin-top: var(--space-xs); } /* ── Filter Bar ── */ .filter-bar { background: var(--bg-surface); border: 1px solid var(--bg-divider); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; margin-bottom: var(--space-xl); } .filter-group { display: flex; flex-direction: column; gap: var(--space-xs); } .filter-group label { font-size: var(--type-eyebrow); letter-spacing: 0.12em; font-weight: var(--weight-medium); text-transform: uppercase; color: var(--text-muted); } .filter-group input, .filter-group select { background: var(--bg-canvas); border: 1px solid var(--bg-divider); border-radius: var(--radius-md); color: var(--text-body); padding: var(--space-sm) var(--space-md); font-size: var(--type-body); font-family: var(--font-sans); min-width: 140px; } .filter-group input:focus, .filter-group select:focus { outline: 2px solid var(--accent-tool); outline-offset: 1px; } .filter-group select option { background: var(--bg-surface); color: var(--text-body); } /* ── Active filter chips ── */ .active-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-md); min-height: 36px; } .filter-chip { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--state-brand-bg); color: var(--state-brand-light); border: 1px solid var(--state-brand); border-radius: var(--radius-sm); padding: 5px 12px; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.05em; } .chip-remove { background: none; border: none; color: var(--state-brand-light); font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; } .chip-remove:hover { color: var(--state-danger-light); } .btn-clear-all { background: none; border: none; color: var(--state-danger); font-size: var(--type-body); cursor: pointer; text-decoration: underline; padding: 0 var(--space-xs); } /* ── Buttons ── */ .btn { border: none; border-radius: var(--radius-md); cursor: pointer; font-size: var(--type-body); font-weight: var(--weight-medium); padding: var(--space-sm) var(--space-lg); font-family: var(--font-sans); transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .btn-primary { background: var(--accent-tool); color: #FFFFFF; } .btn-success { background: var(--state-ok); color: var(--bg-canvas); } .btn-danger { background: var(--state-danger); color: var(--text-primary); } .btn-reset { background: none; border: 1px solid var(--bg-divider); color: var(--text-muted); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-lg); font-size: var(--type-body); font-weight: var(--weight-medium); cursor: pointer; font-family: var(--font-sans); transition: color 0.15s, border-color 0.15s; } .btn-reset:hover:not(:disabled) { color: var(--state-danger); border-color: var(--state-danger); } .btn-reset:disabled { opacity: 0.35; cursor: not-allowed; } /* ── Quarter Pre-filter ── */ .quarter-prefilter { display: flex; align-items: center; gap: var(--space-md); background: var(--bg-surface); border: 1px solid var(--bg-divider); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-xl); margin-bottom: var(--space-sm); flex-wrap: wrap; } .quarter-prefilter-label { font-size: var(--type-eyebrow); letter-spacing: 0.12em; font-weight: var(--weight-medium); text-transform: uppercase; color: var(--text-muted); margin-right: var(--space-xs); } .quarter-year-select { background: var(--bg-canvas); border: 1px solid var(--bg-divider); border-radius: var(--radius-md); color: var(--text-body); padding: 4px 10px; font-size: var(--type-body); font-family: var(--font-sans); cursor: pointer; } .quarter-btn-group { display: flex; gap: 4px; } .quarter-btn { background: var(--bg-canvas); border: 1px solid var(--bg-divider); border-radius: var(--radius-md); color: var(--text-muted); padding: 4px 14px; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.06em; cursor: pointer; font-family: var(--font-sans); transition: background .15s, color .15s, border-color .15s; } .quarter-btn:hover { background: var(--bg-elevated); color: var(--text-body); border-color: var(--accent-tool); } .quarter-btn.active { background: var(--accent-tool); color: #fff; border-color: var(--accent-tool); font-weight: var(--weight-semibold); } .quarter-hint { font-size: var(--type-eyebrow); color: var(--text-muted); opacity: 0.55; letter-spacing: 0.04em; } /* ── Loading bar ── */ .loading-bar { background: var(--state-brand-bg); color: var(--state-brand-light); font-size: var(--type-body); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md); margin-bottom: var(--space-sm); border-left: 3px solid var(--state-brand); } /* ── Hamburger button (unused now — FuelControl's own sidebar was dropped in favor of EmpApp's persistent LeftNav — kept in case a ported child component still references the class) ── */ .sidebar-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: var(--bg-surface); border: 1px solid var(--bg-divider); border-radius: var(--radius-md); cursor: pointer; padding: 8px; transition: border-color .15s; position: relative; z-index: 210; } .sidebar-toggle:hover { border-color: var(--accent-tool); } .sidebar-toggle span { display: block; height: 2px; background: var(--text-muted); border-radius: 2px; transition: background .15s; } .sidebar-toggle:hover span { background: var(--accent-tool); } .btn-home { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg-surface); border: 1px solid var(--bg-divider); border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; transition: border-color .15s, color .15s; position: relative; z-index: 210; } .btn-home:hover { border-color: var(--accent-tool); color: var(--accent-tool); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 220px; background: var(--bg-surface); border-right: 1px solid var(--bg-divider); z-index: 201; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 4px 0 24px rgba(0,0,0,0.25); } .sidebar.open { transform: translateX(0); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--bg-divider); } .sidebar-title { font-size: var(--type-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--weight-medium); color: var(--text-muted); } .sidebar-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 4px; line-height: 1; border-radius: var(--radius-sm); transition: color .15s; } .sidebar-close:hover { color: var(--text-body); } .sidebar-item { display: flex; align-items: center; gap: var(--space-md); background: none; border: none; border-left: 3px solid transparent; color: var(--text-muted); padding: var(--space-md) var(--space-xl); font-size: var(--type-body); font-weight: var(--weight-medium); font-family: var(--font-sans); cursor: pointer; text-align: left; width: 100%; transition: color .15s, background .15s, border-color .15s; } .sidebar-item:hover { color: var(--text-body); background: var(--bg-elevated); } .sidebar-item.active { color: var(--accent-tool); border-left-color: var(--accent-tool); background: var(--bg-elevated); font-weight: var(--weight-semibold); } .sidebar-icon { font-size: 1rem; width: 20px; text-align: center; } /* ── Cards ── */ .card { background: var(--bg-surface); border: 1px solid var(--bg-divider); border-radius: var(--radius-lg); padding: var(--space-lg) 18px; } /* ── Data Table ── */ .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--bg-divider); } table { width: 100%; border-collapse: collapse; font-size: var(--type-body-lg); } thead th { background: var(--bg-elevated); color: var(--text-muted); padding: var(--space-md) var(--space-lg); text-align: left; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--bg-divider); } thead th.num { text-align: right; } tbody tr { border-top: 1px solid var(--bg-divider); } tbody tr:first-child { border-top: none; } tbody tr:hover { background: var(--bg-elevated); } tbody td { padding: 14px var(--space-lg); color: var(--text-body); vertical-align: middle; font-variant-numeric: tabular-nums; } tbody td.num { text-align: right; } /* ── Status badges ── */ .badge { display: inline-block; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.08em; padding: 5px 12px; border-radius: var(--radius-sm); } .badge--alert { background: var(--state-danger); color: var(--text-primary); } .badge--alert-outline { background: var(--state-danger-bg); border: 1px solid var(--state-danger); color: var(--state-danger-light); } .badge--watch { background: var(--state-warn-bg); border: 1px solid var(--state-warn); color: var(--state-warn-light); } .badge--ok { background: var(--state-ok-bg); border: 1px solid var(--state-ok); color: var(--state-ok-light); } .badge--info { background: var(--state-brand-bg); border: 1px solid var(--state-brand); color: var(--state-brand-light); } .badge--neutral { background: var(--bg-elevated); border: 1px solid var(--bg-divider); color: var(--text-muted); } /* Legacy severity badges */ .badge-high { display: inline-block; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.08em; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--state-danger-bg); border: 1px solid var(--state-danger); color: var(--state-danger-light); } .badge-medium { display: inline-block; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.08em; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--state-warn-bg); border: 1px solid var(--state-warn); color: var(--state-warn-light); } .badge-low { display: inline-block; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.08em; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--state-ok-bg); border: 1px solid var(--state-ok); color: var(--state-ok-light); } /* ── Alert banners ── */ .alert { border-radius: var(--radius-lg); padding: 14px 18px; font-size: var(--type-body-lg); margin-bottom: var(--space-lg); border-left: 3px solid; } .alert-warning { background: var(--state-warn-bg); border-left-color: var(--state-warn); color: var(--state-warn-light); } .alert-danger { background: var(--state-danger-bg); border-left-color: var(--state-danger); color: var(--state-danger-light); } .alert-info { background: var(--state-brand-bg); border-left-color: var(--state-brand); color: var(--state-brand-light); } .alert-banner { padding: 14px 18px; margin-bottom: var(--space-lg); border-left: 3px solid; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); } .alert-banner--danger { background: var(--state-danger-bg); border-left-color: var(--state-danger); } .alert-banner--warn { background: var(--state-warn-bg); border-left-color: var(--state-warn); } .alert-banner--brand { background: var(--state-brand-bg); border-left-color: var(--state-brand); } .alert-banner .eyebrow-label { font-size: var(--type-eyebrow); letter-spacing: 0.15em; font-weight: var(--weight-medium); text-transform: uppercase; margin-bottom: var(--space-xs); } .alert-banner--danger .eyebrow-label { color: var(--state-danger); } .alert-banner--warn .eyebrow-label { color: var(--state-warn); } .alert-banner--brand .eyebrow-label { color: var(--state-brand); } .alert-banner .message { color: var(--text-primary); font-size: var(--type-body-lg); } /* ── Section titles ── */ .section-title { font-size: var(--type-body-lg); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: var(--space-md); } .section-eyebrow { font-size: var(--type-eyebrow); letter-spacing: 0.15em; font-weight: var(--weight-medium); text-transform: uppercase; color: var(--accent-tool); margin-bottom: var(--space-xs); } .section-subtitle { font-size: var(--type-body); color: var(--text-muted); margin-bottom: var(--space-sm); } /* ── Chart containers ── */ .chart-container { position: relative; } .chart-sm { height: 220px; } .chart-md { height: 300px; } .chart-lg { height: 380px; } /* ── Map ── */ #fuel-map { height: 480px; border-radius: var(--radius-lg); border: 1px solid var(--bg-divider); } /* ── Spinner ── */ .spinner-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-3xl); color: var(--text-muted); font-size: var(--type-body-lg); } .spinner { width: 28px; height: 28px; border: 3px solid var(--bg-divider); border-top-color: var(--accent-tool); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ── Grid layouts ── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-lg); } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ── Alert detail panel ── */ .alert-detail-panel { animation: slideDown 0.2s ease; } .btn-icon { background: none; border: 1px solid var(--bg-divider); color: var(--text-muted); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); cursor: pointer; font-size: var(--type-body); line-height: 1.6; font-family: var(--font-sans); transition: color 0.15s, border-color 0.15s; } .btn-icon:hover { color: var(--text-body); border-color: var(--text-muted); } .alert-count-badge { font-size: var(--type-body); padding: 2px 9px; border-radius: var(--radius-sm); font-weight: var(--weight-medium); margin-left: var(--space-sm); } /* ── Overview tab KPI row ── */ .ov-kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); } @media (max-width: 1100px) { .ov-kpi-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .ov-kpi-row { grid-template-columns: 1fr 1fr; } } .ov-kpi-card { background: var(--bg-elevated); border: 1px solid var(--bg-divider); border-top: 3px solid var(--accent-tool); border-radius: var(--radius-lg); padding: var(--space-lg); } .ov-kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-xs) 0; } .ov-kpi-meta { font-size: var(--type-eyebrow); color: var(--text-muted); } /* ── Pagination ── */ .pagination-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); margin-top: var(--space-md); } .pagination-info { font-size: var(--type-body); color: var(--text-muted); } .pagination-bar .btn-icon:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* ── Section header row ── */ .section-header { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); } .section-badge { font-size: var(--type-body); color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--bg-divider); border-radius: var(--radius-sm); padding: 2px 10px; white-space: nowrap; } /* ── Row coloring ── */ .row-ok { background: var(--state-ok-bg); } .row-warn { background: var(--state-warn-bg); } .row-danger { background: var(--state-danger-bg); } /* ── Cell severity ── */ .severity-high { color: var(--state-danger); font-weight: var(--weight-medium); } .severity-med { color: var(--state-warn); font-weight: var(--weight-medium); } /* ── Status tags ── */ .tag { display: inline-block; font-size: var(--type-eyebrow); font-weight: var(--weight-medium); padding: 5px 12px; border-radius: var(--radius-sm); letter-spacing: 0.08em; } .tag-ok { background: var(--state-ok-bg); border: 1px solid var(--state-ok); color: var(--state-ok-light); } .tag-pending { background: var(--state-warn-bg); border: 1px solid var(--state-warn); color: var(--state-warn-light); } .tag-error { background: var(--state-danger-bg); border: 1px solid var(--state-danger); color: var(--state-danger-light); } .tag-blue { background: var(--state-brand-bg); border: 1px solid var(--state-brand); color: var(--state-brand-light); } /* ── Utilities ── */ .text-danger { color: var(--state-danger); } .text-warn { color: var(--state-warn); } .text-ok { color: var(--state-ok); } .text-brand { color: var(--state-brand); } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .font-mono { font-family: var(--font-mono); } .tabular-nums { font-variant-numeric: tabular-nums; } /* Legacy color aliases */ .text-red { color: var(--state-danger); } .text-amber { color: var(--state-warn); } .text-green { color: var(--state-ok); } .mt-1 { margin-top: var(--space-sm); } .mt-2 { margin-top: var(--space-lg); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-sm); } .mb-2 { margin-bottom: var(--space-lg); } .gap-1 { gap: var(--space-sm); } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } /* ── Custom chart legends ── */ .chart-custom-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-md); } .chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--type-body); color: var(--text-body); } .chart-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .chart-legend-pct { color: var(--text-muted); font-variant-numeric: tabular-nums; } .chart-footnote { font-size: var(--type-eyebrow); color: var(--text-muted); text-align: center; margin-top: var(--space-xs); letter-spacing: 0.05em; } /* ── Blazor error boundary ── */ .blazor-error-boundary { background: var(--state-danger-bg); border: 1px solid var(--state-danger); padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-3xl); color: var(--state-danger-light); border-radius: var(--radius-lg); } .blazor-error-boundary::after { content: "An error has occurred."; } }