/* ============================================================================ portflow.css — the single stylesheet for PortFlow. ---------------------------------------------------------------------------- Phase A2a: the TOKEN LAYER only. This file is additive and loads last. Nothing in the existing UI consumes these tokens yet, so adding it changes no rendered pixel; it exists so Radzen resolves its whole variable graph from our palette, and so later phases have one place to fold into. How the theming works --------------------- Radzen ships `standard-base.css`, which declares ~1,760 --rz-* variables, almost all of them var() chains over ~60 literal primitives (grey scale, brand, status, type, density). Override those primitives and every Radzen component re-resolves. That is all this file does for Radzen. Light/dark is the single axis. The class goes on BOTH and : selects the palette here, is what the legacy site.css rules match on. The palette is Night Watch, chosen in phase A4 from three candidates. Layer order — later layers win regardless of selector specificity. ============================================================================ */ @layer pf-tokens, pf-base, pf-layout, pf-components, pf-pages, pf-utilities; /* NOTE ON LAYERS: the token blocks below are deliberately UNLAYERED. Radzen declares its ~1,760 --rz-* variables unlayered in standard-base.css, and an unlayered declaration always beats a layered one regardless of source order — so a bridge inside @layer would silently never apply. The @layer list above orders the RULES written in later phases, not these declarations. */ /* ============================================================================ FROZEN — SLOT TYPE COLOURS. BUSINESS CRITICAL. ---------------------------------------------------------------------------- These values are identical in light and dark and must never be themed. They mirror, exactly: - PortFlow.Shared/Helpers/SlotDisplayStyleHelper.cs (authoritative; the Syncfusion Schedule reads its colours from there, not from CSS) - SlotCard.razor.css, AgentNominationSlotCard.razor.css, SlotEditor.razor.css, ShipperSlotListPanel.razor, TerminalOperatorSlotListPanel.razor Declared here as tokens so new markup can reference them by name instead of retyping hex. The existing rules are NOT changed to use them in this phase. DoubleBank (#efe4da / #5c4033) exists only in the C# helper today. ============================================================================ */ :root { --pf-slot-permanent-bg: #e1efff; --pf-slot-permanent-border: #78afd9; --pf-slot-permanent-hover: #d4e7ff; --pf-slot-opportunistic-bg: #e4f4e9; --pf-slot-opportunistic-border: #5fa777; --pf-slot-opportunistic-hover: #d8eedf; --pf-slot-priority-bg: #f9e3e3; --pf-slot-priority-border: #d16a6a; --pf-slot-priority-hover: #f4d6d6; --pf-slot-reserved-bg: #fff0df; --pf-slot-reserved-border: #d89a4b; --pf-slot-reserved-hover: #ffe6c7; --pf-slot-terminal-bg: #94e8d2; --pf-slot-terminal-border: #4da98e; --pf-slot-terminal-hover: #87dec7; --pf-slot-inport-bg: #d8daef; --pf-slot-inport-border: #aab3d8; --pf-slot-inport-hover: #cdd2eb; --pf-slot-inport-fg: #12304b; --pf-slot-doublebank-bg: #efe4da; --pf-slot-doublebank-fg: #5c4033; --pf-slot-virtualgap-bg: #fff8dc; --pf-slot-virtualgap-border: #d4b106; --pf-slot-virtualgap-hover: #fff3c2; --pf-slot-fallback-bg: #e2e8f0; --pf-slot-fg: #12304b; /* KPI performance bands — carried over verbatim from site.css:1248-1260 */ --pf-band-darkgreen: #1b5e20; --pf-band-darkgreen-bg: rgba(27, 94, 32, .12); --pf-band-green: #2e7d32; --pf-band-green-bg: rgba(46, 125, 50, .12); --pf-band-orange: #ef6c00; --pf-band-orange-bg: rgba(239, 108, 0, .14); --pf-band-red: #c62828; --pf-band-red-bg: rgba(198, 40, 40, .14); --pf-band-darkred: #7f1d1d; --pf-band-darkred-bg: rgba(127, 29, 29, .16); --pf-band-none: #94a3b8; --pf-band-none-bg: rgba(148, 163, 184, .12); } :root.pf-theme-dark { --pf-band-darkgreen: #4ade80; --pf-band-darkgreen-bg: rgba(74, 222, 128, .16); --pf-band-green: #86efac; --pf-band-green-bg: rgba(134, 239, 172, .14); --pf-band-orange: #fb923c; --pf-band-orange-bg: rgba(251, 146, 60, .18); --pf-band-red: #f87171; --pf-band-red-bg: rgba(248, 113, 113, .18); --pf-band-darkred: #fca5a5; --pf-band-darkred-bg: rgba(252, 165, 165, .22); --pf-band-none: #94a3b8; --pf-band-none-bg: rgba(148, 163, 184, .16); } /* ============================================================================ SHARED SCALES — type, spacing, radius, elevation, motion, z-index. Type, spacing, radius, elevation, motion, z-index. Small, tight and readable is the brief: 13px base, 1.4 line-height, a compact control height, and a numeric variant that tabular-aligns. ============================================================================ */ :root { /* Type */ --pf-font-sans: 'Source Sans 3', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --pf-font-head: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --pf-font-mono: 'Roboto Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace; --pf-fs-2xs: 0.6875rem; /* 11px — dense table meta, chips */ --pf-fs-xs: 0.75rem; /* 12px — captions, secondary labels */ --pf-fs-sm: 0.8125rem; /* 13px — BASE. body, inputs, grid cells */ --pf-fs-md: 0.875rem; /* 14px — emphasised body, panel titles */ --pf-fs-lg: 1rem; /* 16px — section headings */ --pf-fs-xl: 1.125rem; /* 18px — page title */ --pf-fs-2xl: 1.375rem; /* 22px — dashboard hero numerals */ --pf-fs-3xl: 1.75rem; /* 28px — KPI headline figure */ --pf-lh-tight: 1.25; --pf-lh-base: 1.4; --pf-lh-loose: 1.6; --pf-fw-normal: 400; --pf-fw-medium: 500; --pf-fw-semibold: 600; --pf-fw-bold: 700; --pf-tracking-tight: -0.01em; --pf-tracking-wide: 0.04em; /* Spacing — 4px rhythm */ --pf-space-0: 0; --pf-space-1: 0.25rem; --pf-space-2: 0.5rem; --pf-space-3: 0.75rem; --pf-space-4: 1rem; --pf-space-5: 1.25rem; --pf-space-6: 1.5rem; --pf-space-8: 2rem; --pf-space-10: 2.5rem; /* Radius — Quay: generous, soft */ --pf-radius-sm: 7px; --pf-radius: 10px; --pf-radius-lg: 14px; --pf-radius-pill: 999px; /* Density — control heights */ --pf-control-h-xs: 1.375rem; --pf-control-h-sm: 1.75rem; --pf-control-h: 2rem; --pf-control-h-lg: 2.5rem; /* Layout geometry — must match the current shell exactly */ --pf-topbar-h: 56px; --pf-sidebar-w: 260px; --pf-sidebar-mini-w: 64px; --pf-page-pad-x: 20px; --pf-page-pad-y: 16px; /* Motion */ --pf-ease: cubic-bezier(0.4, 0, 0.2, 1); --pf-dur-fast: 120ms; --pf-dur: 200ms; --pf-dur-slow: 280ms; /* Z-index — preserves the existing stack. TRIED AND REVERTED: raising --pf-z-dialog above 2000 (Radzen's hardcoded popup z-index — every dropdown/autocomplete/datepicker panel opens at that value via Radzen's own JS, not themeable through any variable Radzen exposes). The idea was that a Radzen popup left open on a page (a filter dropdown, say) when something then opens a dialog would otherwise paint over the dialog -- 2000 beats 1080 -- and eat the click meant for Save/Cancel, which looks exactly like "the button doesn't work". Reverted because that same popup mechanism is used to OPEN dropdowns from WITHIN a dialog, and at least one of those -- the Direction dropdown inside JobCardCargoDialog, a Radzen DialogService modal -- renders its panel as a child of , not of the dialog: a sibling of the dialog wrapper, not a descendant of it. --rz-dialog-zindex bridges to this same token, so raising it would have raised that dialog's wrapper to 2200 while its own portaled dropdown stayed at 2000 -- the dropdown would render BEHIND its own dialog. This app opens Radzen dropdowns and datepickers from inside dialogs in many places (9 dialogs built this session alone), and whether each one portals this way was not checked for all of them, so the safe assumption is that several do. Fixing the dialog-vs-stray-popup case by breaking the popup-vs-its-own-dialog case is not a fix. Left at the original values; the underlying complaint (a popup not disappearing when a dialog opens) is reported to the user as investigated but not resolved, rather than shipped with an unverified regression risk across dialogs already in production. */ --pf-z-sidebar: 1040; --pf-z-backdrop: 1039; --pf-z-topbar: 1050; --pf-z-dialog: 1080; --pf-z-toast: 1090; } /* ============================================================================ PALETTE — NIGHT WATCH The chosen direction. Dark-first, built for a 24-hour operations room: near-black ground so the screen does not light the room, cyan as the working colour, amber reserved strictly for states that need a human. Light mode, below, is the inversion for daytime desk use. Dark is the designed state. When a value has to give, give it in light. ============================================================================ */ :root { --pf-surface-0: #ffffff; --pf-surface-1: #eef2f6; --pf-surface-2: #f5f8fb; --pf-surface-3: #e3e9f0; --pf-surface-sunken: #e3e9f0; --pf-border: #dbe3ec; --pf-border-strong: #b9c6d5; --pf-border-subtle: #e6ecf2; /* Ink for surfaces that stay light in BOTH themes — status tints that carry meaning (risk red/orange/green, tidal pink) and so cannot flip with the theme. Text on those grounds cannot use --pf-text, which turns near-white in dark mode and vanishes. Deliberately NOT redefined in the dark block: the whole point is that it does not move. */ --pf-ink-on-tint: #152130; --pf-ink-on-tint-muted: #46586b; /* Dialog form surfaces. The surface ramp is not monotonic across themes (light: surface-1 #eef2f6 is DARKER than surface-2 #f5f8fb; dark: it is the other way round), so a dialog that picks raw surface-N for its sections reads correctly in one theme and inverts in the other. These four say what they mean instead: a section is a tinted ground, a field is a well cut into it, and the relationship holds in both themes. */ --pf-dlg-section-bg: #e9eff6; --pf-dlg-section-border: #ccd9e6; --pf-dlg-field-bg: #ffffff; --pf-dlg-field-border: #a8bacd; /* A field is a well, so it carries a soft inner shadow rather than a glow; the dark theme swaps this for a lit edge. */ --pf-dlg-field-glow: inset 0 1px 2px rgba(21, 33, 48, .06); --pf-text: #152130; --pf-text-muted: #46586b; --pf-text-subtle: #6f8093; --pf-text-inverse: #ffffff; --pf-brand: #155e94; --pf-brand-hover: #1a71b0; --pf-brand-active: #0f4b78; --pf-brand-subtle: rgba(21, 94, 148, 0.10); --pf-on-brand: #ffffff; /* Filled deep-blue action button (VBP/TO planner toolbars). Stays a dark control in both themes so its white ink holds; --pf-brand is light in dark mode, so using it as the second stop put the ink at 1.06 contrast. */ --pf-action-grad: linear-gradient(135deg, #1a4a72 0%, #155e94 100%); --pf-accent: #b45309; --pf-accent-hover: #d2650f; --pf-accent-subtle: rgba(180, 83, 9, 0.14); --pf-on-accent: #ffffff; --pf-focus-ring: #155e94; --pf-chrome-bg: #ffffff; --pf-chrome-fg: var(--pf-text); --pf-nav-bg: #0f2540; --pf-nav-fg: #c7d5e4; --pf-nav-hover-bg: rgba(255, 255, 255, 0.06); --pf-nav-active-bg: rgba(255, 255, 255, 0.10); --pf-nav-active-fg: #ffffff; --pf-nav-active-marker: #5aa9e6; --pf-success: #047857; --pf-on-success: #ffffff; --pf-warning: #b45309; --pf-on-warning: #ffffff; --pf-danger: #b91c1c; --pf-on-danger: #ffffff; --pf-info: #0369a1; --pf-on-info: #ffffff; --pf-shadow-sm: 0 1px 2px rgba(21, 33, 48, .05); --pf-shadow: 0 1px 2px rgba(21, 33, 48, .05), 0 4px 14px rgba(21, 33, 48, .06); --pf-shadow-lg: 0 24px 60px rgba(21, 33, 48, .28); /* ── PANEL SYSTEM — "Ledger, banded cards" ──────────────────────── THREE PLANES, and they have to stay three. The page ground, the panel floating on it, and the card wells sunk into the panel. The previous round collapsed the header onto the panel surface and the panel onto the ground — same colour, one hairline between them — which is exactly what "no clear distinction between the panels and backgrounds" meant. Every value below exists to hold those three apart, in both modes. The family colour is carried by --pf-fam, set per panel by the .pf-panel__header--* modifiers and inherited by everything inside. A default is mandatory: an unset --pf-fam makes every rule below invalid at computed-value time, and the header loses its colour. */ --pf-fam: var(--pf-brand); --pf-panel-bg: var(--pf-surface-0); --pf-panel-border: var(--pf-border-strong); --pf-panel-radius: 8px; --pf-panel-shadow: var(--pf-shadow-sm); /* The card well. Sunk INTO the panel, never lifted off it — that is what separates a card from the panel carrying it. */ --pf-card-bg: #eef3f8; --pf-card-border: #c3d0de; --pf-card-inset: inset 0 1px 0 rgba(255, 255, 255, .7); /* Header band: a tint of the family colour over the panel, capped by a rule in that colour. Deliberately not a filled slab — --pf-brand is #5aa9e6 in dark mode, and white text on it fails contrast. */ --pf-panel-head-tint: 12%; --pf-panel-head-bg: color-mix(in srgb, var(--pf-fam) var(--pf-panel-head-tint), var(--pf-panel-bg)); --pf-panel-head-fg: color-mix(in srgb, var(--pf-fam) 85%, #000); /* Family accents. Semantic and deliberately separate from the frozen --pf-band-* KPI palette, which must never be re-used for chrome. */ --pf-fam-brand: var(--pf-brand); --pf-fam-danger: var(--pf-danger); --pf-fam-success: var(--pf-success); --pf-fam-warning: var(--pf-warning); --pf-fam-info: var(--pf-info); --pf-fam-slate: #475569; --pf-fam-teal: #0f766e; /* Chart palette. Read by wwwroot/js/pfCharts.js through getComputedStyle at render time, so charts re-theme from here. */ --pf-chart-1: #155e94; --pf-chart-2: #0f766e; --pf-chart-3: #475569; --pf-chart-4: #047857; --pf-chart-5: #b45309; --pf-chart-6: #0369a1; --pf-chart-7: #6b46c1; --pf-chart-8: #0e7490; --pf-chart-grid: #e6ecf2; --pf-chart-tick: #46586b; --pf-chart-target: #c62828; --pf-chart-tooltip-bg: #152130; } :root.pf-theme-dark { --pf-surface-0: #1b2532; /* panel */ --pf-surface-1: #0f1721; /* page ground */ --pf-surface-2: #222e3d; --pf-surface-3: #2b3848; --pf-surface-sunken: #0a1119; --pf-border: #2b3848; --pf-border-strong: #3d4d61; --pf-border-subtle: #26323f; /* Inverted deliberately: on dark the panel is #1b2532, so the field has to be DARKER than its section to read as a well, not lighter. Blue rather than neutral, and lit at the edge instead of shadowed, so a field reads as an instrument face on the bridge rather than a hole cut in the panel. */ --pf-dlg-section-bg: #253243; --pf-dlg-section-border: #3d4d61; --pf-dlg-field-bg: #132538; --pf-dlg-field-border: #3f6d99; --pf-dlg-field-glow: inset 0 1px 0 rgba(140, 190, 235, .10), 0 0 0 1px rgba(90, 169, 230, .08), 0 0 6px rgba(90, 169, 230, .10); --pf-text: #e7edf4; --pf-text-muted: #b0bccb; --pf-text-subtle: #7f8ea0; --pf-text-inverse: #06203a; --pf-brand: #5aa9e6; --pf-brand-hover: #7dbcec; --pf-brand-active: #3f8fcf; --pf-brand-subtle: rgba(90, 169, 230, 0.14); --pf-on-brand: #06203a; --pf-action-grad: linear-gradient(135deg, #123a5e 0%, #1d6098 100%); --pf-accent: #fbbf24; --pf-accent-hover: #fcd34d; --pf-accent-subtle: rgba(251, 191, 36, 0.16); --pf-on-accent: #2b1d02; --pf-focus-ring: #5aa9e6; --pf-chrome-bg: #0b1420; --pf-chrome-fg: var(--pf-text); --pf-nav-bg: #0b1420; --pf-nav-fg: #b0bccb; --pf-nav-hover-bg: rgba(255, 255, 255, 0.05); --pf-nav-active-bg: rgba(90, 169, 230, 0.14); --pf-nav-active-fg: #ffffff; --pf-nav-active-marker: #5aa9e6; --pf-success: #34d399; --pf-on-success: #022c1e; --pf-warning: #fbbf24; --pf-on-warning: #2b1d02; --pf-danger: #fb7185; --pf-on-danger: #37060f; --pf-info: #38bdf8; --pf-on-info: #04202e; --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --pf-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .35); --pf-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6); /* Panel system — dark. Only what differs; everything else re-resolves through the light declarations, because a custom property that references another resolves at the element that uses it, not where it was declared. The card well goes DARKER than the panel here, not lighter. A lighter well reads as raised, and the whole point of the plane is that it is recessed — inverting it in dark mode would quietly undo the separation this system exists to create. */ --pf-card-bg: #131c27; --pf-card-border: #3d4d61; --pf-card-inset: inset 0 1px 0 rgba(255, 255, 255, .04); /* A heavier tint, because the family colours are brighter and the surface beneath them is darker. The title takes the family colour as-is: darkening it toward black, as light mode does, would sink it into the panel. */ --pf-panel-head-tint: 24%; --pf-panel-head-fg: var(--pf-fam); --pf-fam-slate: #94a3b8; --pf-fam-teal: #2dd4bf; --pf-chart-1: #5aa9e6; --pf-chart-2: #22d3ee; --pf-chart-3: #9cc9ee; --pf-chart-4: #34d399; --pf-chart-5: #fbbf24; --pf-chart-6: #38bdf8; --pf-chart-7: #a78bfa; --pf-chart-8: #2dd4bf; --pf-chart-grid: #26323f; --pf-chart-tick: #b0bccb; --pf-chart-target: #f87171; --pf-chart-tooltip-bg: #0f1721; } /* ============================================================================ RADZEN BRIDGE Maps our tokens onto the ~60 Radzen primitives. Radzen's own base sheet derives its remaining ~1,700 variables from these through var() chains, so overriding here re-themes every Radzen component in both modes and all three designs, with no per-component CSS. Declared alongside the palette on :root so both resolve against the same element. The palette must NOT live on : with it there, body's own var() substitutions resolved against a stale table while child elements resolved correctly. Root-declared tokens inherit everywhere and avoid that entirely. ============================================================================ */ :root { /* --- Neutral scale. Radzen reads surfaces and text off --rz-base-*. --- */ --rz-white: var(--pf-surface-0); --rz-black: var(--pf-text); --rz-base-50: var(--pf-surface-0); --rz-base-100: var(--pf-surface-1); --rz-base-200: var(--pf-surface-2); --rz-base-300: var(--pf-border); --rz-base-400: var(--pf-border-strong); --rz-base-500: var(--pf-text-subtle); --rz-base-600: var(--pf-text-subtle); --rz-base-700: var(--pf-text-muted); --rz-base-800: var(--pf-text); --rz-base-900: var(--pf-text); --rz-base: var(--pf-surface-2); --rz-base-light: var(--pf-surface-2); --rz-base-lighter: var(--pf-surface-1); --rz-base-dark: var(--pf-text-muted); --rz-base-darker: var(--pf-text); --rz-on-base: var(--pf-text); --rz-on-base-light: var(--pf-text); --rz-on-base-lighter: var(--pf-text); --rz-on-base-dark: var(--pf-text-inverse); --rz-on-base-darker: var(--pf-text-inverse); /* --- Brand --- */ --rz-primary: var(--pf-brand); --rz-primary-light: var(--pf-brand-hover); --rz-primary-lighter: var(--pf-brand-subtle); --rz-primary-dark: var(--pf-brand-active); --rz-primary-darker: var(--pf-brand-active); --rz-on-primary: var(--pf-on-brand); --rz-on-primary-light: var(--pf-on-brand); --rz-on-primary-dark: var(--pf-on-brand); --rz-on-primary-darker: var(--pf-on-brand); --rz-on-primary-lighter: var(--pf-brand); --rz-secondary: var(--pf-accent); --rz-secondary-light: var(--pf-accent-hover); --rz-secondary-lighter: var(--pf-accent-subtle); --rz-secondary-dark: var(--pf-accent-hover); --rz-secondary-darker: var(--pf-accent-hover); --rz-on-secondary: var(--pf-on-accent); --rz-on-secondary-light: var(--pf-on-accent); --rz-on-secondary-dark: var(--pf-on-accent); --rz-on-secondary-darker: var(--pf-on-accent); --rz-on-secondary-lighter: var(--pf-accent); /* --- Status --- */ --rz-info: var(--pf-info); --rz-info-light: var(--pf-info); --rz-info-dark: var(--pf-info); --rz-info-darker: var(--pf-info); --rz-info-lighter: var(--pf-brand-subtle); --rz-on-info: var(--pf-on-info); --rz-on-info-light: var(--pf-on-info); --rz-on-info-dark: var(--pf-on-info); --rz-on-info-darker: var(--pf-on-info); --rz-on-info-lighter: var(--pf-info); --rz-success: var(--pf-success); --rz-success-light: var(--pf-success); --rz-success-dark: var(--pf-success); --rz-success-darker: var(--pf-success); --rz-success-lighter: var(--pf-band-green-bg); --rz-on-success: var(--pf-on-success); --rz-on-success-light: var(--pf-on-success); --rz-on-success-dark: var(--pf-on-success); --rz-on-success-darker: var(--pf-on-success); --rz-on-success-lighter: var(--pf-success); --rz-warning: var(--pf-warning); --rz-warning-light: var(--pf-warning); --rz-warning-dark: var(--pf-warning); --rz-warning-darker: var(--pf-warning); --rz-warning-lighter: var(--pf-band-orange-bg); --rz-on-warning: var(--pf-on-warning); --rz-on-warning-light: var(--pf-on-warning); --rz-on-warning-dark: var(--pf-on-warning); --rz-on-warning-darker: var(--pf-on-warning); --rz-on-warning-lighter: var(--pf-warning); --rz-danger: var(--pf-danger); --rz-danger-light: var(--pf-danger); --rz-danger-dark: var(--pf-danger); --rz-danger-darker: var(--pf-danger); --rz-danger-lighter: var(--pf-band-red-bg); --rz-on-danger: var(--pf-on-danger); --rz-on-danger-light: var(--pf-on-danger); --rz-on-danger-dark: var(--pf-on-danger); --rz-on-danger-darker: var(--pf-on-danger); --rz-on-danger-lighter: var(--pf-danger); /* --- Typography --- */ --rz-text-font-family: var(--pf-font-sans); --rz-body-font-size: var(--pf-fs-sm); --rz-body-line-height: var(--pf-lh-base); --rz-text-color: var(--pf-text); --rz-text-body1-font-size: var(--pf-fs-md); --rz-text-body2-font-size: var(--pf-fs-sm); --rz-text-caption-font-size: var(--pf-fs-xs); --rz-text-button-font-size: var(--pf-fs-sm); --rz-text-button-font-weight: var(--pf-fw-semibold); --rz-text-subtitle1-font-size: var(--pf-fs-md); --rz-text-subtitle2-font-size: var(--pf-fs-sm); /* Headings retuned down from Radzen's marketing-scale clamp() defaults — this is an operations console, not a landing page. */ --rz-text-h1-font-size: var(--pf-fs-3xl); --rz-text-h2-font-size: var(--pf-fs-2xl); --rz-text-h3-font-size: var(--pf-fs-xl); --rz-text-h4-font-size: var(--pf-fs-lg); --rz-text-h5-font-size: var(--pf-fs-md); --rz-text-h6-font-size: var(--pf-fs-sm); --rz-text-h1-line-height: var(--pf-lh-tight); --rz-text-h2-line-height: var(--pf-lh-tight); --rz-text-h3-line-height: var(--pf-lh-tight); --rz-text-h4-line-height: var(--pf-lh-tight); --rz-text-h5-line-height: var(--pf-lh-tight); --rz-text-h6-line-height: var(--pf-lh-tight); /* --- Shape and density --- */ --rz-border-radius: var(--pf-radius); --rz-border-radius-1: var(--pf-radius-sm); --rz-border-radius-2: var(--pf-radius); --rz-border-radius-3: var(--pf-radius-lg); --rz-input-size-xs: var(--pf-control-h-xs); --rz-input-size-sm: var(--pf-control-h-sm); --rz-input-size-md: var(--pf-control-h); --rz-input-size-lg: var(--pf-control-h-lg); --rz-input-font-size-xs: var(--pf-fs-xs); --rz-input-font-size-lg: var(--pf-fs-md); /* --- Slot lifecycle steps --- The SLOT STATUS STEPS section says colours "come from the bridged --rz-steps-* variables", but nothing ever set them, so the strip has been running on Radzen's defaults — which is why the step titles were unreadable on a dark dialog. These are the bridge that comment describes. */ --rz-steps-color: var(--pf-text-muted); --rz-steps-title-selected-color: var(--pf-text); --rz-steps-number-background-color: var(--pf-surface-3); --rz-steps-number-color: var(--pf-text); --rz-steps-number-selected-background: var(--pf-brand); --rz-steps-number-selected-color: var(--pf-on-brand); --rz-steps-title-margin-inline: 0.4rem; /* --- Date picker popup --- The popup renders at the end of , not inside whatever dialog opened it, so none of the .pf-dialog__body form rules reach it. Driving Radzen's own variables themes it in place, and keeps working when Radzen changes its internal markup. */ --rz-datepicker-panel-background-color: var(--pf-surface-0); --rz-datepicker-header-background-color: var(--pf-dlg-section-bg); --rz-datepicker-header-color: var(--pf-text); --rz-datepicker-calendar-color: var(--pf-text); --rz-datepicker-calendar-header-color: var(--pf-text-muted); --rz-timepicker-background-color: var(--pf-dlg-field-bg); --rz-timepicker-color: var(--pf-text); --rz-card-padding: var(--pf-space-4); --rz-panel-padding: var(--pf-space-3); --rz-card-shadow: var(--pf-shadow); --rz-panel-shadow: var(--pf-shadow-sm); --rz-dialog-shadow: var(--pf-shadow-lg); --rz-header-shadow: var(--pf-shadow-sm); /* --- Grid: dense by default; this is a data application --- */ --rz-grid-cell-padding: 0.375rem 0.5rem; --rz-grid-header-padding: 0.5rem; --rz-grid-header-font-size: var(--pf-fs-xs); --rz-grid-header-font-weight: var(--pf-fw-semibold); --rz-grid-header-text-transform: uppercase; --rz-grid-stripe-background-color: color-mix(in srgb, var(--pf-text) 4%, transparent); --rz-grid-stripe-odd-background-color: transparent; --rz-grid-selected-background-color: var(--pf-brand-subtle); --rz-grid-selected-color: var(--pf-text); --rz-grid-header-background-color: var(--pf-surface-2); /* The rest of what Radzen's grid actually reads. Its structural sheet supplies a fallback for none of these, and the colour theme that would normally define them is deliberately not loaded (App.razor takes standard-base.css alone). An undefined custom property falls back to the property's INITIAL value, so every cell border resolved to "none" and every row background to transparent: the fifteen RadzenDataGrid pages have been rendering borderless while the forty-two plain-table pages drew full token borders. That is the largest single reason two grids in this app did not look alike. */ --rz-grid-background-color: transparent; --rz-grid-color: var(--pf-text); --rz-grid-cell-color: var(--pf-text); --rz-grid-header-color: var(--pf-brand); --rz-grid-border: 1px solid var(--pf-border); --rz-grid-cell-border: 1px solid var(--pf-border-subtle); --rz-grid-bottom-cell-border: 1px solid var(--pf-border-subtle); /* No vertical rules between cells: the plain tables do not draw them either, and column separators on a dense grid read as noise. */ --rz-grid-right-cell-border: 0 none; --rz-grid-header-cell-border: 0 none; --rz-grid-header-cell-border-bottom: 1px solid var(--pf-border); --rz-grid-hover-background-color: color-mix(in srgb, var(--pf-brand) 10%, transparent); --rz-grid-hover-color: var(--pf-text); /* --- Dialog: one look for every modal in the app --- */ --rz-dialog-title-font-size: var(--pf-fs-lg); --rz-dialog-title-font-weight: var(--pf-fw-semibold); --rz-dialog-title-letter-spacing: var(--pf-tracking-tight); --rz-dialog-content-padding: var(--pf-space-5); --rz-dialog-zindex: var(--pf-z-dialog); --rz-dialog-mask-zindex: calc(var(--pf-z-dialog) - 1); /* --- Shell geometry: match the existing PortFlow chrome exactly --- */ --rz-sidebar-width: var(--pf-sidebar-w); --rz-header-min-height: var(--pf-topbar-h); --rz-sidebar-z: var(--pf-z-sidebar); --rz-header-z: var(--pf-z-topbar); /* --- Panel menu (Radzen's nav) tuned to the PortFlow sidebar --- */ --rz-panel-menu-item-background-color: transparent; --rz-panel-menu-item-color: var(--pf-nav-fg); --rz-panel-menu-item-hover-background-color: var(--pf-nav-hover-bg); --rz-panel-menu-item-active-background-color: var(--pf-nav-active-bg); --rz-panel-menu-item-active-color: var(--pf-nav-active-fg); --rz-panel-menu-item-active-indicator: var(--pf-nav-active-marker); --rz-panel-menu-item-border: none; --rz-panel-menu-item-border-radius: var(--pf-radius); --rz-panel-menu-item-padding-block: 0.4375rem; --rz-panel-menu-icon-color: var(--pf-nav-fg); --rz-panel-menu-item-2nd-level-background-color: transparent; --rz-panel-menu-item-2nd-level-hover-background-color: var(--pf-nav-hover-bg); --rz-panel-menu-item-2nd-level-active-background-color: var(--pf-nav-active-bg); } /* ========================================================================== FOLDED GLOBAL STYLESHEETS -------------------------------------------------------------------------- Everything below arrived from the five global sheets that used to be linked separately, concatenated in their original load order so the cascade is unchanged. Colours were rewritten to tokens property-aware (a hex means a different thing as a foreground, a background and a border); anything not in a mapping was left as a literal rather than guessed at. Rules under .pf-theme-dark that hardcoded the old marine palette are now redundant — the tokenized light rule already resolves to the dark value under that selector — but they are kept. A redundant correct rule costs nothing; deleting a hundred of them on the same pass would make any regression impossible to attribute. Per-component .razor.css files and