/* ══════════════════════════════════════════════════════════════════════════════
vx-design-system.css — EXTENSIONS for B1 (BSC-Entries visual uplift)
──────────────────────────────────────────────────────────────────────────────
APPEND THESE BLOCKS to the END of your existing vx-design-system.css (just
before the MIGRATION ALIASES section). Two new patterns:
• SECTION HEADER — sub-section lead-in inside a panel
(used to label "Metric", "Actuals", "Add Entry"
sub-sections in the BSC-Entries KPI panel)
• INLINE FORM — horizontally-laid form row with right-aligned actions
(used for the Add Entry form on BSC-Entries; will be
reused on future authoring pages)
Both follow the existing token / naming / commenting conventions of your file.
No changes to existing rules; nothing renamed; safe to drop in.
══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
SECTION HEADER — sub-section lead-in inside a panel body
Use INSIDE a panel body (NOT in place of vx-panel-header which is the panel's
own header bar). Pattern: small icon + uppercase label, followed by content.
Visually quieter than vx-panel-header — it doesn't have the grey background
strip, just a colored icon and an uppercase label.
Usage:
…content…
Variant: add `compact` for tighter top margin when sections stack closely.
══════════════════════════════════════════════════════════════════════════════ */
.vx-section-header {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px; margin-bottom: 8px;
}
.vx-section-header.compact { margin-top: 4px; }
.vx-section-header:first-child { margin-top: 0; }
.vx-section-header-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; flex-shrink: 0;
color: #4a6fa5;
}
.vx-section-header-label {
font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
/* ══════════════════════════════════════════════════════════════════════════════
INLINE FORM — horizontal row of form fields with right-aligned actions
Use for compact authoring controls embedded inside a panel — typically the
"Add Entry" / "Add Item" form that lives below a list of existing items.
Usage:
The fields wrap responsively on narrow screens. The actions row sits below
on screens ≤640px; right-aligned on wider screens.
══════════════════════════════════════════════════════════════════════════════ */
.vx-inline-form {
display: flex; flex-direction: column; gap: 10px;
}
.vx-inline-form-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.vx-inline-form-field { min-width: 0; }
.vx-inline-form-actions {
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
/* ══════════════════════════════════════════════════════════════════════════════
PANEL BODY — the content area inside a vx-panel
Already implicit in your CSS, but explicit here for the BSC-Entries layout
which has multiple internal sections that need consistent left/right padding.
══════════════════════════════════════════════════════════════════════════════ */
.vx-panel-body {
padding: 16px 20px;
}
/* ══════════════════════════════════════════════════════════════════════════════
COLLAPSIBLE PANEL (Mud-driven mechanics, vx-* surface styling)
When wrapping a MudExpansionPanel in a vx-panel, use these to remove the
Mud panel's own background/border so only the vx-panel's visual weight shows.
Usage:
…
Mechanics stay Mud's (toggle, animation, accessibility). Surface is vx-*.
══════════════════════════════════════════════════════════════════════════════ */
.vx-collapsible .mud-expand-panel,
.vx-collapsible .mud-expand-panel.mud-elevation-0 {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.vx-collapsible .mud-expand-panel-header {
padding: 14px 20px !important;
background: var(--mud-palette-background-grey) !important;
border-bottom: 1px solid var(--mud-palette-divider) !important;
transition: background 0.12s !important;
}
.vx-collapsible .mud-expand-panel-header:hover {
background: var(--mud-palette-background) !important;
}
.vx-collapsible .mud-expand-panel.mud-panel-expanded > .mud-expand-panel-header {
border-bottom: 1px solid var(--mud-palette-divider) !important;
}
.vx-collapsible .mud-expand-panel-content {
padding: 16px 20px !important;
}
/* Nested collapsibles indent slightly so the user visually tracks depth */
.vx-collapsible-nested {
margin-left: 12px;
border-left: 2px solid var(--mud-palette-divider);
padding-left: 8px;
}
/* ══════════════════════════════════════════════════════════════════════════════
PROMOTED TO CANONICAL (vx-design-system.css)
──────────────────────────────────────────────────────────────────────────────
The following rules previously lived here as extensions but have been
promoted into the canonical vx-design-system.css. They were promoted
because:
1. Multiple pages now consume them (ObjectiveDetail, OrgUnitDetail,
Objective-KPIs, OrgManagement, OrgChart) — they are no longer "new"
patterns being prototyped, they're load-bearing.
2. The flat-selector form (`.vx-page-header-desc { color: ... }`)
was being beaten by global `body { color }` resets in some light-
theme builds. The canonical file uses descendent selectors
(`.vx-page-header .vx-page-header-desc`) which raise specificity
from 0,0,1,0 to 0,0,2,0 and reliably win cascade.
3. They belong with the parent vx-page-header rule rather than living
in a separate "extensions" file that may not always be loaded.
The rules now live in vx-design-system.css:
• .vx-page-header-desc — multiline description below the title
• .vx-back-btn — "‹ Label" pill at the top of the header
• .vx-meta-strip — wrapping flex container
• .vx-meta-item — single label/value pair
• .vx-meta-label — uppercase eyebrow text
• .vx-meta-value — emphasized value text
• .vx-orgunit-chip — clickable org-unit nav chip
• .vx-orgunit-chip-icon — its leading icon
• .vx-orgunit-chip.on-light — light-background variant
• .vx-panel-hint — subdued context next to vx-panel-title
• .vx-panel-body — default body padding inside a panel
If you load this extensions file alone (without the canonical), those
selectors will be missing — make sure vx-design-system.css is loaded.
══════════════════════════════════════════════════════════════════════════════ */