/* ==========================================================================
PRC CONTROL DECK ↔ RADZEN BRIDGE
Restyles the Radzen.Blazor components the portal keeps (DataGrid, DropDown,
DatePicker, TextBox/TextArea, ProgressBar, Badge, Dialog/Notification)
with the Control Deck tokens from prc.css. Load order in App.razor:
(stays pinned; all theming below)
css/prc.css (tokens + primitives)
css/prc-radzen-bridge.css (this file)
css/portal.css (portal-specific additions)
Light/dark switching runs entirely through the data-theme attribute on
— the Radzen theme stylesheet itself is never swapped.
========================================================================== */
/* ---------- 1. Radzen variable remap → PRC tokens ---------- */
:root {
/* type */
--rz-text-font-family: var(--font-body);
--rz-body-font-size: 14.5px;
--rz-body-line-height: 1.55;
/* brand */
--rz-primary: var(--acc-fill);
--rz-primary-light: #ffb74d;
--rz-primary-lighter: var(--acc-soft);
--rz-primary-dark: var(--acc-strong);
--rz-primary-darker: #e65100;
--rz-on-primary: #14100a;
--rz-secondary: var(--acc-strong);
--rz-on-secondary: #14100a;
/* status */
--rz-success: var(--ok);
--rz-warning: var(--warn);
--rz-danger: var(--err);
--rz-info: var(--info);
/* text */
--rz-text-color: var(--text);
--rz-text-title-color: var(--text);
--rz-text-secondary-color: var(--text-dim);
--rz-text-disabled-color: var(--text-faint);
--rz-text-body1-color: var(--text);
--rz-text-body2-color: var(--text-dim);
--rz-text-subtitle1-color: var(--text);
--rz-text-subtitle2-color: var(--text-dim);
--rz-link-color: var(--acc);
--rz-link-hover-color: var(--acc-strong);
/* surfaces — the ambient .prc-backdrop shows through everywhere */
--rz-body-background-color: transparent;
--rz-base-background-color: transparent;
--rz-content-background-color: transparent;
/* radii */
--rz-border-radius: var(--r-md);
--rz-button-border-radius: var(--r-md);
--rz-input-border-radius: 10px;
--rz-card-border-radius: var(--r-lg);
/* cards → glass */
--rz-card-background-color: var(--glass);
--rz-card-shadow: var(--shadow);
--rz-card-border: 1px solid var(--edge);
--rz-card-padding: 26px 28px;
/* inputs → .prc-input look */
--rz-input-background-color: var(--field-bg);
--rz-input-border: 1px solid var(--field-edge);
--rz-input-border-block-end: 1px solid var(--field-edge);
--rz-input-shadow: none;
--rz-input-height: 36px;
--rz-input-font-size: 13px;
--rz-input-value-color: var(--text);
--rz-input-placeholder-color: var(--text-faint);
--rz-input-hover-background-color: var(--field-bg);
--rz-input-hover-border: 1px solid var(--edge-strong);
--rz-input-hover-border-block-end: 1px solid var(--edge-strong);
--rz-input-hover-shadow: none;
--rz-input-focus-background-color: var(--field-bg);
--rz-input-focus-border: 1px solid var(--acc);
--rz-input-focus-border-block-end: 1px solid var(--acc);
--rz-input-focus-shadow: 0 0 0 3px var(--acc-soft);
--rz-input-focus-outline: none;
/* data grid → .prc-table look */
--rz-grid-background-color: transparent;
--rz-grid-border: none;
--rz-grid-border-radius: 0;
--rz-grid-header-background-color: transparent;
--rz-grid-header-color: var(--text-faint);
--rz-grid-header-font-size: 10.5px;
--rz-grid-header-font-weight: 700;
--rz-grid-header-text-transform: uppercase;
--rz-grid-header-cell-border: none;
--rz-grid-header-cell-border-bottom: 1px solid var(--edge-strong);
--rz-grid-header-cell-padding: 10px 14px;
--rz-grid-cell-border: 1px solid var(--edge);
--rz-grid-cell-color: var(--text);
--rz-grid-cell-font-size: 13px;
--rz-grid-cell-padding: 9px 14px;
--rz-grid-hover-background-color: var(--row-hover);
--rz-grid-hover-color: var(--text);
--rz-grid-selected-background-color: var(--acc-soft);
--rz-grid-selected-color: var(--acc);
--rz-grid-stripe-background-color: transparent;
--rz-grid-stripe-odd-background-color: transparent;
--rz-grid-filter-background-color: transparent;
--rz-grid-header-filter-icon-active-color: var(--acc);
/* pager */
--rz-pager-background-color: transparent;
--rz-pager-border: none;
--rz-pager-summary-color: var(--text-faint);
--rz-pager-numeric-button-background-color: transparent;
--rz-pager-numeric-button-color: var(--text-dim);
--rz-pager-numeric-button-hover-background-color: var(--glass-soft);
--rz-pager-numeric-button-hover-color: var(--text);
--rz-pager-numeric-button-selected-background-color: var(--acc-soft);
--rz-pager-numeric-button-selected-color: var(--acc);
--rz-pager-back-button-background-color: transparent;
--rz-pager-back-button-color: var(--text-dim);
--rz-pager-next-button-background-color: transparent;
--rz-pager-next-button-color: var(--text-dim);
/* popups / dialogs / notifications */
--rz-dialog-background-color: var(--glass-strong);
--rz-dropdown-open-background-color: var(--field-bg);
/* Floating panels. Several of these chain to --rz-base-background-color in
the stock theme, which this bridge sets to transparent for the page-level
surfaces — popups must therefore get explicit opaque-glass backgrounds.
The datepicker header is base-800 in the stock theme (a fixed dark grey
that never follows the light theme), so it is re-anchored to tokens. */
--rz-datepicker-panel-background-color: var(--glass-strong);
--rz-datepicker-panel-border: 1px solid var(--edge-strong);
--rz-datepicker-panel-shadow: var(--shadow);
--rz-datepicker-header-background-color: var(--glass-soft);
--rz-datepicker-header-color: var(--text);
--rz-datepicker-header-border: 1px solid var(--edge);
--rz-datepicker-calendar-color: var(--text);
--rz-datepicker-calendar-header-color: var(--text-faint);
--rz-datepicker-calendar-hover-background-color: var(--row-hover);
--rz-datepicker-calendar-hover-color: var(--text);
--rz-datepicker-calendar-selected-background-color: var(--acc-fill);
--rz-datepicker-calendar-selected-color: #14100a;
--rz-datepicker-calendar-selected-hover-background-color: var(--acc-fill);
--rz-datepicker-calendar-selected-hover-color: #14100a;
--rz-datepicker-calendar-today-background-color: var(--acc-soft);
--rz-datepicker-calendar-today-color: var(--acc);
--rz-lookup-panel-background-color: var(--glass-strong);
--rz-overlay-background-color: var(--glass-strong);
--rz-menu-background-color: var(--glass-strong);
--rz-grid-filter-background-color: var(--glass-strong);
--rz-grid-filter-buttons-background-color: var(--glass-strong);
--rz-grid-filter-color: var(--text);
--rz-input-disabled-background-color: var(--field-bg);
}
/* ---------- 2. Typography ---------- */
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3 {
font-family: var(--font-display);
font-weight: 300;
}
.rz-text-overline {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ---------- 3. Cards → glass panels ---------- */
.rz-card {
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
}
/* ---------- 4. Buttons → .prc-btn voices ---------- */
.rz-button {
transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s;
}
.rz-button .rz-button-text {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.rz-button.rz-variant-filled.rz-primary {
background: var(--acc-fill);
color: #14100a;
box-shadow: 0 0 18px var(--acc-glow-btn);
}
.rz-button.rz-variant-filled.rz-primary:not(.rz-state-disabled):hover {
filter: brightness(1.07);
transform: translateY(-1px);
box-shadow: 0 0 24px var(--acc-glow-btn);
}
/* Secondary/outlined buttons become ghosts — the Server has two button voices */
.rz-button.rz-variant-filled.rz-secondary,
.rz-button.rz-variant-outlined.rz-primary,
.rz-button.rz-variant-outlined.rz-secondary {
background: var(--glass-soft);
border: 1px solid var(--edge-strong);
color: var(--text);
box-shadow: none;
}
.rz-button.rz-variant-filled.rz-secondary:not(.rz-state-disabled):hover,
.rz-button.rz-variant-outlined.rz-primary:not(.rz-state-disabled):hover,
.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover {
border-color: var(--acc);
color: var(--acc);
box-shadow: 0 0 14px var(--acc-glow-btn);
}
.rz-button.rz-variant-filled.rz-danger,
.rz-button.rz-variant-outlined.rz-danger {
background: #e53935;
border: none;
color: #fff;
box-shadow: 0 0 18px rgba(244, 67, 54, 0.245);
}
.rz-button.rz-variant-text {
color: var(--text-dim);
}
.rz-button.rz-variant-text:not(.rz-state-disabled):hover {
background: var(--glass-soft);
color: var(--text);
}
/* ---------- 5. Inputs ---------- */
.rz-textbox, .rz-inputtext, textarea.rz-inputtext,
.rz-dropdown .rz-dropdown-label,
.rz-calendar .rz-inputtext {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.rz-dropdown {
background: var(--field-bg);
border: 1px solid var(--field-edge);
}
.rz-dropdown:not(.rz-state-disabled):hover {
border-color: var(--edge-strong);
}
.rz-dropdown-trigger {
color: var(--text-faint);
}
/* Floating popup panels (dropdown list, calendar, filter popup, context
menu): opaque-glass surface with the Control Deck blur. Backgrounds are
also set via the panel variables above; this adds the blur/border/shadow
the variables cannot express. (.rz-datepicker itself is the inline field
wrapper, NOT the popup — do not style it here.) */
.rz-dropdown-panel,
.rz-lookup-panel,
.rz-autocomplete-panel,
.rz-multiselect-panel,
.rz-overlaypanel,
.rz-context-menu,
.rz-grid-filter,
.rz-datepicker-popup-container {
background: var(--glass-strong);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--edge-strong);
box-shadow: var(--shadow);
border-radius: var(--r-md);
}
/* ---------- 6. Data grid ---------- */
/* Wrap grids in so rows clip to
the 18px panel radius — same recipe as .prc-table on the Server. */
.rz-data-grid,
.rz-datatable {
background: transparent;
border: none;
}
.rz-grid-table thead th .rz-column-title {
letter-spacing: 0.16em;
white-space: nowrap;
}
/* horizontal ruling only — same as .prc-table */
.rz-grid-table td,
.rz-grid-table th {
border-inline: none !important;
}
.rz-grid-table tbody td {
border-width: 0 0 1px 0;
}
.rz-grid-table thead th {
border-width: 0 0 1px 0;
}
/* numbers in grid cells read as telemetry */
.rz-grid-table .rz-cell-data {
font-variant-numeric: tabular-nums;
}
.rz-pager {
border-top: 1px solid var(--edge);
}
/* ---------- 7. Misc ---------- */
.rz-progressbar-circular .rz-progressbar-value {
border-color: var(--acc-fill);
}
.rz-badge.rz-badge-success {
background: rgba(61, 220, 132, 0.12);
border: 1px solid var(--ok);
color: var(--ok);
}
.rz-badge.rz-badge-danger {
background: rgba(255, 82, 82, 0.12);
border: 1px solid var(--err);
color: var(--err);
}
.rz-notification-item {
background: var(--glass-strong);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--edge-strong);
color: var(--text);
box-shadow: var(--shadow);
}
.rz-dialog {
background: var(--glass-strong);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
border: 1px solid var(--edge-strong);
box-shadow: var(--shadow);
}
.rz-dialog-mask {
background: rgba(4, 6, 10, 0.55);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}