/* ══════════════════════════════════════════════════════════════════════════════
vx-design-system.css — Vectris shared design system
──────────────────────────────────────────────────────────────────────────────
TOKEN STRATEGY
─────────────
• Structural surfaces (card bg, borders, text) → --mud-palette-*
MudThemeProvider injects these inline — they always exist regardless of
whether this file loads. Light/dark is handled by MudBlazor automatically.
• Brand colours (navy gradients, steel accent) → hardcoded hex
#0f1f3d navy #1a3260 navy-mid #2d4a7a slate #4a6fa5 steel
These never change per-theme (headers are always dark navy on both themes).
• Semantic pill/badge colours → --vx-error/warning/success/info tokens
These are cosmetic only — if this file fails to load, pills just lose colour.
Light values in :root, dark values in [data-theme="dark"].
DARK MODE
─────────
Controlled entirely by [data-theme="dark"] on , set by:
• _Host.cshtml inline script (before first paint — no flash)
• MainLayout.razor ToggleTheme() + OnInitializedAsync()
• Login.razor ToggleTheme()
prefers-color-scheme is intentionally NOT used — the app has its own toggle.
══════════════════════════════════════════════════════════════════════════════ */
/* ── Semantic colour tokens — light mode defaults ─────────────────────────── */
:root {
--vx-success: #16a34a;
--vx-warning: #d97706;
--vx-error: #c8192c;
--vx-info: #1d4ed8;
--vx-success-bg: #dcfce7;
--vx-warning-bg: #fef3c7;
--vx-error-bg: #fde8ea;
--vx-info-bg: #dbeafe;
--vx-success-text: #166534;
--vx-warning-text: #92400e;
--vx-error-text: #991b1b;
--vx-info-text: #1e40af;
}
/* ── Semantic colour tokens — dark mode ───────────────────────────────────── */
[data-theme="dark"] {
--vx-success: #22c55e;
--vx-warning: #f59e0b;
--vx-error: #f43f5e;
--vx-info: #60a5fa;
--vx-success-bg: rgba(34,197,94,0.15);
--vx-warning-bg: rgba(245,158,11,0.15);
--vx-error-bg: rgba(244,63,94,0.15);
--vx-info-bg: rgba(96,165,250,0.15);
--vx-success-text: #4ade80;
--vx-warning-text: #fbbf24;
--vx-error-text: #fb7185;
--vx-info-text: #93c5fd;
}
/* ══════════════════════════════════════════════════════════════════════════════
PAGE SHELL
══════════════════════════════════════════════════════════════════════════════ */
.vx-page {
background: var(--mud-palette-background);
min-height: 100vh;
color: var(--mud-palette-text-primary);
}
/* Premium light-mode polish: panels lift slightly off the page background
with a soft tinted shadow + a hairline border. The shadow tint matches
the brand navy (#0f1f3d) at very low alpha so it reads as intentional
shadow rather than dirty grey. In dark mode the shadow is essentially
invisible against the near-black surface — harmless, so we leave one
universal rule. */
/* ══════════════════════════════════════════════════════════════════════════════
PAGE HEADER — navy gradient banner used on all ERM / BCM pages
══════════════════════════════════════════════════════════════════════════════ */
.vx-page-header {
background: linear-gradient(135deg, #0f1f3d 0%, #1a3260 60%, #2d4a7a 100%);
padding: 24px 28px 20px;
border-radius: 0 0 16px 16px;
/* 16px below — tightened from 22px so the navy block doesn't feel
like a billboard floating in space. Whatever content follows
(action strip, completion tile, panel) sits closer and reads as
part of the same page rather than a separate region. */
margin-bottom: 16px;
position: relative; overflow: hidden;
/* Lock text color to white inside the navy banner. Setting it here
(on the parent) means every descendant inherits unless it has its
own explicit color rule. This is more robust than trying to win
the cascade fight on each individual child class — when a parent
in the page (e.g. .vx-page) sets `color: var(--mud-palette-text-primary)`,
that color cascades down and wins against any rule with equal or
lower specificity. By overriding here at the page-header level
with !important, we cut that chain cleanly. The few elements that
DO need a different color (chips with their own backgrounds, the
green OPEN status badge) set their own color explicitly and will
not be affected. */
color: rgba(255,255,255,0.92) !important;
}
/* Subtle crosshatch texture */
.vx-page-header::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.vx-page-header-eyebrow {
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: rgba(255,255,255,0.55) !important;
margin-bottom: 4px; position: relative; z-index: 1;
}
.vx-page-header-title {
font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em;
color: #fff !important; line-height: 1.15; position: relative; z-index: 1;
}
.vx-page-header-sub {
font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em;
text-transform: uppercase; color: rgba(255,255,255,0.55) !important;
position: relative; z-index: 1;
}
/* ══════════════════════════════════════════════════════════════════════════════
PAGE-HEADER COMPANIONS (added: page-header-desc / back-btn / meta-strip /
orgunit-chip)
──────────────────────────────────────────────────────────────────────────────
Selectors are scoped under `.vx-page-header .X` (specificity 0,0,2,0)
instead of just `.X` so they reliably outweigh any global `body { color }`
reset that MudBlazor might apply in light mode.
The inner-text colors carry `!important` because:
1. The page-header is always the navy gradient — there is no theme in
which dark text on it would be correct. The rule is unambiguous.
2. MudBlazor sets --mud-palette-text-primary on body and several
utility classes pull from it. Without !important here, any one of
those competing selectors can win the cascade in a future Mud
update and turn the meta strip invisible.
3. The cost of "wrong" here is text-invisible (worst possible UX).
The cost of !important is "I can't override this for one experimental
page" — a fine trade. If a future page genuinely needs a different
color on a page-header child, that page can re-declare with its own
!important.
The OUTER-LAYOUT rules (display, padding, gap) are NOT marked !important
because pages legitimately may want to tweak spacing.
══════════════════════════════════════════════════════════════════════════════ */
/* Multiline body text under vx-page-header-title.
Used on entity-detail pages (Objective, OrgUnit, etc.) for a one-or-two-
sentence description that follows the title.
Usage:
…
Reduce churn by 25% in the SMB segment.
*/
.vx-page-header .vx-page-header-desc,
.vx-page-header-desc {
font-size: 0.86rem; line-height: 1.5;
color: rgba(255,255,255,0.78) !important;
margin-top: 8px; max-width: 720px;
position: relative; z-index: 1;
}
/* Small "‹ Label" pill that sits at the top of a page header.
Used as the breadcrumb/back affordance on entity-detail pages.
Usage (inside .vx-page-header):
‹ Org Units */
.vx-page-header .vx-back-btn,
.vx-back-btn {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
color: rgba(255,255,255,0.65) !important;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
padding: 4px 8px 4px 6px;
cursor: pointer;
transition: color 0.12s, background 0.12s, border-color 0.12s;
user-select: none;
margin-bottom: 10px;
position: relative; z-index: 1;
}
.vx-page-header .vx-back-btn:hover,
.vx-back-btn:hover {
color: #fff !important;
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.20);
}
/* Inline label/value pairs below the title — Perspective · Org Unit · Year. */
.vx-page-header .vx-meta-strip,
.vx-meta-strip {
display: flex; flex-wrap: wrap; align-items: center;
gap: 14px 18px;
margin-top: 14px;
position: relative; z-index: 1;
}
.vx-page-header .vx-meta-item,
.vx-meta-item {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.74rem;
color: rgba(255,255,255,0.78) !important;
}
.vx-page-header .vx-meta-label,
.vx-meta-label {
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.55) !important;
}
.vx-page-header .vx-meta-value,
.vx-meta-value {
font-weight: 600;
color: rgba(255,255,255,0.92) !important;
}
/* The OrgUnit navigation chip (stocktake §6).
Sits in a vx-meta-strip on entity-detail pages and routes to /org/unit/{id}.
Outlined, white-with-alpha on the navy header. Hover brightens.
Usage:
Logistics
For pages whose meta strip sits on a LIGHT background, add `.on-light`. */
.vx-page-header .vx-orgunit-chip,
.vx-orgunit-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.74rem; font-weight: 600;
color: rgba(255,255,255,0.92) !important;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 18px;
padding: 3px 12px 3px 10px;
cursor: pointer;
user-select: none;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.vx-page-header .vx-orgunit-chip:hover,
.vx-orgunit-chip:hover {
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.50);
color: #fff !important;
}
.vx-orgunit-chip-icon {
font-size: 0.85rem; opacity: 0.75;
display: inline-flex; align-items: center;
}
/* Variant for entity-detail pages whose meta strip sits on light background.
`.on-light` overrides the !important from the dark-default rules above
with its own !important so it can swap to dark-on-light correctly. */
.vx-orgunit-chip.on-light {
color: var(--mud-palette-text-primary) !important;
background: var(--mud-palette-background-grey);
border-color: var(--mud-palette-divider);
}
.vx-orgunit-chip.on-light:hover {
background: var(--mud-palette-surface);
border-color: #4a6fa5;
color: #0f1f3d !important;
}
/* Badge / pill rendered on a dark header (e.g. "ACTIVE · OPEN CYCLE") */
.vx-header-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px; padding: 4px 12px;
font-size: 0.72rem; font-weight: 700; color: #fff; letter-spacing: 0.04em;
position: relative; z-index: 1;
}
.vx-header-badge-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.3);
}
/* ══════════════════════════════════════════════════════════════════════════════
STAT CARDS — the summary number strip below the page header
Usage: