/* ============================================================
Sheet 3 of 3 — the LAST stylesheet in .
LocalTeams Radzen override layer.
Structure (per the WebAdmin UI spec §5.2):
1. Brand primitives (--lt-*) — single source of truth
2. Remap Radzen's --rz-* to them — recolors components for free
3. Targeted rules — surfaces variables don't cover
To rebrand: edit section 1 only. Everything downstream follows.
============================================================ */
/* ============================================================
1. BRAND PRIMITIVES
(mirror of tokens/colors.css + typography.css so this sheet is
drop-in standalone for the Blazor app)
============================================================ */
:root, body, .rz-default {
--lt-ink-1: oklch(20% 0.02 240);
--lt-ink-2: oklch(30% 0.02 240);
--lt-ink-3: oklch(35% 0.02 240);
--lt-ink-4: oklch(46% 0.02 240);
--lt-ink-5: oklch(62% 0.014 240);
--lt-ink-disabled: oklch(72% 0.012 240);
--lt-canvas: oklch(97% 0.006 235);
--lt-surface: oklch(99% 0.003 235);
--lt-surface-sunken: oklch(95% 0.008 235);
--lt-surface-white: #ffffff;
--lt-line: oklch(88% 0.014 235);
--lt-line-strong: oklch(85% 0.014 235);
--lt-line-soft: oklch(90% 0.012 235);
--lt-line-faint: oklch(92% 0.01 235);
--lt-accent: oklch(52% 0.16 246);
--lt-accent-hover: oklch(46% 0.16 246);
--lt-accent-ink: oklch(40% 0.15 246);
--lt-accent-tint: oklch(94% 0.035 246);
--lt-accent-line: oklch(85% 0.03 246);
--lt-trust: oklch(58% 0.15 152);
--lt-trust-ink: oklch(40% 0.14 152);
--lt-trust-tint: oklch(94% 0.05 152);
--lt-trust-line: oklch(85% 0.06 152);
--lt-warn: oklch(72% 0.15 75);
--lt-warn-ink: oklch(48% 0.13 75);
--lt-warn-tint: oklch(95% 0.05 85);
--lt-danger: oklch(55% 0.18 25);
--lt-danger-line: oklch(80% 0.06 25);
--lt-danger-tint: oklch(95% 0.03 25);
--lt-font-display: 'Manrope', 'Helvetica Neue', Helvetica, sans-serif;
--lt-font-body: 'Public Sans', 'Helvetica Neue', Helvetica, sans-serif;
--lt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--lt-radius-sm: 8px;
--lt-radius-xl: 12px;
--lt-shadow-card: 0 1px 3px rgba(0,0,0,0.04);
--lt-shadow-raised: 0 1px 3px rgba(0,0,0,0.08);
--lt-shadow-float: 0 4px 12px rgba(0,0,0,0.18);
}
/* ============================================================
2. REMAP RADZEN VARIABLES ONTO THE PRIMITIVES
============================================================ */
:root, body, .rz-default {
/* --- brand + functional ------------------------------------------- */
--rz-primary: var(--lt-accent);
--rz-primary-light: oklch(62% 0.14 246);
--rz-primary-lighter: var(--lt-accent-tint);
--rz-primary-dark: var(--lt-accent-hover);
--rz-primary-darker: var(--lt-accent-ink);
--rz-on-primary: #fff;
--rz-on-primary-lighter: var(--lt-accent-ink);
--rz-secondary: var(--lt-ink-4);
--rz-secondary-lighter: var(--lt-surface-sunken);
--rz-on-secondary: #fff;
--rz-success: var(--lt-trust);
--rz-success-lighter: var(--lt-trust-tint);
--rz-on-success-lighter: var(--lt-trust-ink);
--rz-info: var(--lt-accent);
--rz-info-lighter: var(--lt-accent-tint);
--rz-on-info-lighter: var(--lt-accent-ink);
--rz-warning: var(--lt-warn);
--rz-warning-lighter: var(--lt-warn-tint);
--rz-on-warning-lighter: var(--lt-warn-ink);
--rz-danger: var(--lt-danger);
--rz-danger-lighter: var(--lt-danger-tint);
--rz-on-danger-lighter: var(--lt-danger);
/* --- neutral ramp -------------------------------------------------- */
--rz-base-50: var(--lt-surface);
--rz-base-100: var(--lt-canvas);
--rz-base-200: var(--lt-surface-sunken);
--rz-base-300: var(--lt-line-faint);
--rz-base-400: var(--lt-line);
--rz-base-500: var(--lt-ink-disabled);
--rz-base-600: var(--lt-ink-5);
--rz-base-700: var(--lt-ink-4);
--rz-base-800: var(--lt-ink-2);
--rz-base-900: var(--lt-ink-1);
--rz-base-background-color: var(--lt-canvas);
/* --- surfaces ------------------------------------------------------ */
--rz-body-background-color: var(--lt-canvas);
--rz-content-background-color: var(--lt-canvas);
--rz-panel-background-color: var(--lt-surface);
--rz-card-background-color: var(--lt-surface);
--rz-surface: var(--lt-surface);
/* --- text ---------------------------------------------------------- */
--rz-text-color: var(--lt-ink-1);
--rz-text-title-color: var(--lt-ink-1);
--rz-text-secondary-color: var(--lt-ink-4);
--rz-text-tertiary-color: var(--lt-ink-5);
--rz-text-disabled-color: var(--lt-ink-disabled);
--rz-link-color: var(--lt-accent);
--rz-link-hover-color: var(--lt-accent-ink);
/* --- borders + radii ---------------------------------------------- */
--rz-border-color: var(--lt-line);
--rz-border-radius: var(--lt-radius-sm);
--rz-border-radius-sm: 7px;
--rz-border-radius-lg: var(--lt-radius-xl);
--rz-border: 1px solid var(--lt-line);
/* --- inputs -------------------------------------------------------- */
--rz-input-background-color: var(--lt-surface-white);
--rz-input-value-color: var(--lt-ink-1);
--rz-input-placeholder-color: var(--lt-ink-5);
--rz-input-border: 1px solid var(--lt-line-strong);
--rz-input-focus-border: 1px solid var(--lt-accent);
--rz-input-focus-shadow: 0 0 0 3px oklch(52% 0.16 246 / 0.28);
--rz-input-border-radius: var(--lt-radius-sm);
--rz-input-font-size: 13px;
--rz-input-disabled-background-color: var(--lt-surface-sunken);
/* --- typography ---------------------------------------------------- */
--rz-body-font-family: var(--lt-font-body);
--rz-text-font-family: var(--lt-font-body);
--rz-body-font-size: 14px;
--rz-body-line-height: 1.5;
--rz-text-h1-font-size: 26px;
--rz-text-h2-font-size: 20px;
--rz-text-h3-font-size: 15px;
--rz-text-h1-font-weight: 800;
--rz-text-h2-font-weight: 800;
--rz-text-h3-font-weight: 700;
/* --- layout chrome ------------------------------------------------- */
--rz-header-background-color: var(--lt-surface);
--rz-header-color: var(--lt-ink-1);
--rz-header-height: 64px;
--rz-sidebar-background-color: var(--lt-surface);
--rz-sidebar-width: 236px;
--rz-footer-background-color: var(--lt-surface);
--rz-footer-color: var(--lt-ink-5);
--rz-panel-menu-background-color: transparent;
--rz-panel-menu-item-color: var(--lt-ink-2);
--rz-panel-menu-item-selected-color: var(--lt-accent-ink);
--rz-panel-menu-item-selected-background-color: var(--lt-accent-tint);
/* --- shadows ------------------------------------------------------- */
--rz-shadow-1: var(--lt-shadow-card);
--rz-shadow-2: var(--lt-shadow-raised);
--rz-shadow-3: var(--lt-shadow-float);
--rz-panel-shadow: var(--lt-shadow-card);
--rz-card-shadow: var(--lt-shadow-card);
}
/* PlatformAdmin context: violet accent, same everything else.
NOTE: the --rz-* lines must be repeated here — a var() declared on :root
resolves against :root's own --lt-accent, so re-pointing the primitive
alone would not reach them. */
body.lt-context-platform, .lt-context-platform {
--lt-accent: oklch(52% 0.16 300);
--lt-accent-hover: oklch(46% 0.16 300);
--lt-accent-ink: oklch(40% 0.15 300);
--lt-accent-tint: oklch(94% 0.03 300);
--lt-accent-line: oklch(85% 0.03 300);
--rz-primary: oklch(52% 0.16 300);
--rz-primary-light: oklch(62% 0.14 300);
--rz-primary-lighter: oklch(94% 0.03 300);
--rz-primary-dark: oklch(46% 0.16 300);
--rz-primary-darker: oklch(40% 0.15 300);
--rz-on-primary: #fff;
--rz-on-primary-lighter: oklch(40% 0.15 300);
--rz-info: oklch(52% 0.16 300);
--rz-info-lighter: oklch(94% 0.03 300);
--rz-on-info-lighter: oklch(40% 0.15 300);
--rz-link-color: oklch(52% 0.16 300);
--rz-link-hover-color: oklch(40% 0.15 300);
--rz-panel-menu-item-selected-color: oklch(40% 0.15 300);
--rz-panel-menu-item-selected-background-color: oklch(94% 0.03 300);
}
/* ============================================================
3. GLOBAL TYPE & CANVAS
============================================================ */
body {
font-family: var(--lt-font-body);
background: var(--lt-canvas);
color: var(--lt-ink-1);
}
h1, h2, h3, .rz-text-h1, .rz-text-h2, .rz-text-h3 {
font-family: var(--lt-font-display);
letter-spacing: -0.01em;
}
a, .rz-link { color: var(--lt-accent); text-decoration: none; font-weight: 600; }
a:hover, .rz-link:hover { color: var(--lt-accent-ink); }
::selection { background: var(--lt-accent-tint); color: var(--lt-accent-ink); }
code, .lt-url { font-family: var(--lt-font-mono); font-size: 12.5px; color: var(--lt-ink-4); }
/* ============================================================
4. HEADER · SIDEBAR · FOOTER
============================================================ */
.rz-header {
background: oklch(99% 0.003 235 / 0.86);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--lt-line);
box-shadow: none;
}
.rz-sidebar {
background: var(--lt-surface);
border-right: 1px solid var(--lt-line);
padding: 18px 12px;
}
.rz-footer {
background: var(--lt-surface);
border-top: 1px solid var(--lt-line);
color: var(--lt-ink-5);
font-size: 12.5px;
}
/* Panel-menu items: pill nav, tinted active state with an inset accent edge */
.rz-panel-menu .rz-navigation-item-link {
border-radius: var(--lt-radius-sm);
padding: 9px 10px;
font-weight: 600;
font-size: 13.5px;
color: var(--lt-ink-2);
gap: 10px;
transition: background var(--lt-transition, 140ms ease), color 140ms ease;
}
.rz-panel-menu .rz-navigation-item-link:hover {
background: var(--lt-surface-sunken);
color: var(--lt-ink-1);
}
.rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.rz-panel-menu .rz-navigation-item-link.rz-navigation-item-link-active {
background: var(--lt-accent-tint) !important;
color: var(--lt-accent-ink) !important;
box-shadow: inset 2px 0 0 0 var(--lt-accent);
}
.rz-panel-menu .rz-navigation-item-link .rzi,
.rz-panel-menu .rz-navigation-item-link i { width: 16px; text-align: center; }
/* Section eyebrow above each nav group */
.rz-sidebar .lt-nav-group-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--lt-ink-5);
padding: 0 10px 8px;
}
/* ============================================================
5. DRILL SHELL (contextual nav columns; only content scrolls)
============================================================ */
.drill-shell { display: flex; height: 100%; overflow: hidden; }
.drill-shell > .drill-nav {
flex: 0 0 200px;
background: var(--lt-surface-sunken);
border-right: 1px solid var(--lt-line);
padding: 16px 10px;
overflow-y: auto;
}
.drill-shell > .drill-content {
flex: 1;
height: 100%;
overflow-y: auto;
padding: 28px 32px 60px;
}
@media (max-width: 640px) {
.drill-shell > .drill-nav { display: none; }
.drill-shell > .drill-content { padding: 18px 14px 48px; }
}
/* ============================================================
6. BUTTONS
============================================================ */
.rz-button {
font-family: var(--lt-font-display);
font-weight: 700;
font-size: 13px;
border-radius: var(--lt-radius-sm);
padding: 9px 16px;
gap: 7px;
box-shadow: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rz-button.rz-primary { background: var(--lt-accent); color: #fff; border: none; }
.rz-button.rz-primary:not(.rz-state-disabled):hover { background: var(--lt-accent-hover); }
.rz-button.rz-secondary,
.rz-button.rz-base {
background: var(--lt-surface);
color: var(--lt-ink-1);
border: 1px solid var(--lt-line-strong);
}
.rz-button.rz-secondary:not(.rz-state-disabled):hover,
.rz-button.rz-base:not(.rz-state-disabled):hover { background: var(--lt-surface-sunken); }
/* ghost family */
.rz-button.rz-variant-text,
.rz-button.rz-variant-outlined,
.rz-button.rz-light {
background: transparent;
color: var(--lt-accent);
border: 1px solid var(--lt-accent-line);
padding: 5px 10px;
border-radius: 7px;
font-size: 12px;
}
.rz-button.rz-variant-text:not(.rz-state-disabled):hover,
.rz-button.rz-variant-outlined:not(.rz-state-disabled):hover { background: var(--lt-accent-tint); }
.rz-button.rz-danger {
background: transparent;
color: var(--lt-danger);
border: 1px solid var(--lt-danger-line);
}
.rz-button.rz-danger:not(.rz-state-disabled):hover { background: var(--lt-danger-tint); }
.rz-button.rz-state-disabled { opacity: 1; color: var(--lt-ink-disabled); background: var(--lt-surface-sunken); border-color: var(--lt-line); }
/* Floating action (SpeedDial) — dark ink circle, never accent-colored */
.rz-speeddial-button, .rz-button.lt-fab {
width: 40px; height: 40px; padding: 0;
border-radius: 50%;
background: var(--lt-ink-1);
color: #fff;
box-shadow: var(--lt-shadow-float);
}
.rz-speeddial-action, .lt-fab-action {
display: inline-flex; align-items: center; gap: 8px;
background: var(--lt-surface);
border: 1px solid var(--lt-line-strong);
border-radius: 999px;
padding: 6px 14px 6px 6px;
font-family: var(--lt-font-display); font-weight: 700; font-size: 13px;
color: var(--lt-ink-1);
}
/* ============================================================
7. INPUTS · FORMS
============================================================ */
.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-datepicker,
.rz-lookup, .rz-autocomplete, .rz-mask, .rz-password {
background: var(--lt-surface-white);
border: 1px solid var(--lt-line-strong);
border-radius: var(--lt-radius-sm);
color: var(--lt-ink-1);
font-family: var(--lt-font-body);
font-size: 13px;
padding: 8px 10px;
box-shadow: none;
}
.rz-textbox:focus, .rz-textarea:focus, .rz-dropdown.rz-state-focused,
.rz-datepicker.rz-state-focused, .rz-numeric:focus-within {
border-color: var(--lt-accent);
box-shadow: 0 0 0 3px oklch(52% 0.16 246 / 0.28);
outline: none;
}
.rz-form-field-label, .rz-form-field .rz-form-field-content > label {
font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
text-transform: uppercase; color: var(--lt-ink-5);
}
.rz-chkbox-box.rz-state-active, .rz-radiobutton-box.rz-state-active,
.rz-switch.rz-switch-checked .rz-switch-circle { background: var(--lt-accent); border-color: var(--lt-accent); }
.rz-switch.rz-switch-checked { background: var(--lt-trust); }
.rz-dropdown-panel, .rz-multiselect-panel, .rz-menu-popup {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: var(--lt-radius-lg, 10px);
box-shadow: var(--lt-shadow-float);
}
.rz-dropdown-item.rz-state-highlight { background: var(--lt-accent-tint); color: var(--lt-accent-ink); }
/* DatePicker & AutoComplete are wrapper controls holding an inner . The base input
rule above already styles the wrapper as the box, so the wrapper stays the single bordered
surface (no doubled border on the date field) and the inner input is flattened — matching a
plain textbox's height exactly (shared --rz-input-height). Padding moves off the wrapper so
the two chromes don't stack. */
.rz-datepicker:not(.rz-datepicker-inline), .rz-autocomplete {
box-sizing: border-box;
height: var(--rz-input-height);
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
}
.rz-datepicker:not(.rz-datepicker-inline) > .rz-inputtext,
.rz-autocomplete .rz-inputtext {
flex: 1; min-width: 0; width: auto;
height: 100%;
padding: 0 10px; margin: 0;
border: none; box-shadow: none; background: transparent;
font-size: 13px; line-height: normal;
}
.rz-datepicker-trigger {
height: 100%;
background: transparent; border: none; box-shadow: none;
}
/* Numeric spinner: same wrapper-is-the-box treatment. The base rule now borders the .rz-numeric
wrapper (not its inner ), so flatten the inner input — otherwise it carried its own
border + 8px padding inside the fixed-height wrapper and overflowed it, making the control look
oversized. Pin the wrapper to the shared input height so it lines up with the other fields. */
.rz-numeric {
box-sizing: border-box;
height: var(--rz-input-height);
padding: 0;
}
.rz-numeric input {
height: 100%;
padding: 0 10px;
border: none; box-shadow: none; background: transparent; border-radius: 0;
font-size: 13px;
}
/* Select bar = segmented tab control from the designs */
.rz-selectbar { background: var(--lt-surface-sunken); border-radius: var(--lt-radius-sm); padding: 3px; border: none; gap: 2px; }
.rz-selectbar .rz-button { background: transparent; border: none; color: var(--lt-ink-4); }
.rz-selectbar .rz-button.rz-state-active {
background: #fff; color: var(--lt-accent-ink); box-shadow: var(--lt-shadow-raised);
}
/* ============================================================
8. CARDS · PANELS · FIELDSET · TABS
============================================================ */
.rz-card, .rz-panel, .rz-fieldset {
background: var(--lt-surface);
border: 1px solid var(--lt-line);
border-radius: var(--lt-radius-xl);
box-shadow: var(--lt-shadow-card);
padding: 18px 20px;
}
.rz-panel-titlebar, .rz-fieldset-legend {
font-family: var(--lt-font-display); font-weight: 700; font-size: 15px;
background: transparent; border: none; padding: 0 0 12px;
}
.rz-tabview-nav { border-bottom: 1px solid var(--lt-line); gap: 4px; }
.rz-tabview-nav li .rz-tabview-title { font-family: var(--lt-font-display); font-weight: 700; font-size: 13px; color: var(--lt-ink-4); }
.rz-tabview-nav li.rz-tabview-selected .rz-tabview-title { color: var(--lt-accent-ink); }
.rz-tabview-nav li.rz-tabview-selected { box-shadow: inset 0 -2px 0 0 var(--lt-accent); }
/* ============================================================
9. DATA GRID · TABLES
============================================================ */
.rz-data-grid, .rz-datatable {
background: transparent;
border: 1px solid var(--lt-line);
border-radius: var(--lt-radius-xl);
overflow: hidden;
}
.rz-data-grid .rz-grid-table thead th, .rz-datatable-thead > tr > th {
background: var(--lt-surface-sunken);
color: var(--lt-ink-4);
font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
border: none; padding: 12px 20px;
}
.rz-data-grid .rz-grid-table tbody td, .rz-datatable-data > tr > td {
background: var(--lt-surface);
border-top: 1px solid var(--lt-line-faint);
border-bottom: none;
padding: 12px 20px;
font-size: 13.5px;
}
.rz-data-grid .rz-grid-table tbody tr:hover td { background: var(--lt-canvas); }
.rz-data-grid .rz-grid-table tbody tr.rz-state-highlight td { background: var(--lt-accent-tint); color: var(--lt-accent-ink); }
.rz-paginator { background: var(--lt-surface); border-top: 1px solid var(--lt-line-faint); }
.rz-paginator .rz-paginator-element.rz-state-active { background: var(--lt-accent); color: #fff; border-radius: 7px; }
/* ============================================================
10. CHIPS · CHIPLIST
(written in full: a stale cached Radzen theme may ship no chip rules)
============================================================ */
.rz-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--lt-surface-sunken);
color: var(--lt-ink-4);
border: 1px solid transparent;
border-radius: 999px;
padding: 5px 11px;
font-size: 12px; font-weight: 700;
line-height: 1;
}
.rz-chip.rz-chip-selected, .rz-chip.rz-state-active {
background: var(--lt-trust); color: #fff;
}
.rz-chip.rz-variant-outlined { background: transparent; border-color: var(--lt-line); }
.rz-chip.rz-chip-sm { padding: 3px 8px; font-size: 11.5px; }
.rz-chip.rz-state-disabled { color: var(--lt-ink-disabled); background: var(--lt-surface-sunken); }
.rz-chip .rz-chip-remove-icon {
color: var(--lt-ink-5); border-radius: 50%; cursor: pointer;
}
.rz-chip .rz-chip-remove-icon:hover { color: var(--lt-danger) !important; background: var(--lt-danger-tint) !important; }
.rz-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
/* ============================================================
11. BADGES · ALERTS · PROGRESS · FEEDBACK · MISC
============================================================ */
.rz-badge {
border-radius: 999px; padding: 4px 10px;
font-size: 11.5px; font-weight: 700; line-height: 1;
}
.rz-badge.rz-badge-success { background: var(--lt-trust-tint); color: var(--lt-trust-ink); }
.rz-badge.rz-badge-warning { background: var(--lt-warn-tint); color: var(--lt-warn-ink); }
.rz-badge.rz-badge-info { background: var(--lt-accent-tint); color: var(--lt-accent-ink); }
.rz-badge.rz-badge-danger { background: var(--lt-danger-tint); color: var(--lt-danger); }
.rz-badge.rz-badge-light, .rz-badge.rz-badge-base { background: oklch(93% 0.01 235); color: var(--lt-ink-4); }
.rz-alert {
border-radius: var(--lt-radius-xl);
border: 1px solid var(--lt-trust-line);
background: var(--lt-trust-tint);
color: var(--lt-trust-ink);
padding: 16px 18px;
font-size: 13px;
}
.rz-alert.rz-alert-warning { background: var(--lt-warn-tint); border-color: oklch(88% 0.06 85); color: var(--lt-warn-ink); }
.rz-alert.rz-alert-danger { background: var(--lt-danger-tint); border-color: var(--lt-danger-line); color: var(--lt-danger); }
.rz-alert.rz-alert-info { background: var(--lt-accent-tint); border-color: var(--lt-accent-line); color: var(--lt-accent-ink); }
.rz-progressbar-value, .rz-progressbar-circular-value { stroke: var(--lt-accent); background: var(--lt-accent); }
.rz-notification-item, .rz-dialog, .rz-tooltip-content {
border-radius: var(--lt-radius-xl);
border: 1px solid var(--lt-line);
background: var(--lt-surface);
box-shadow: var(--lt-shadow-float);
}
.rz-dialog-titlebar { font-family: var(--lt-font-display); font-weight: 800; font-size: 17px; border: none; }
.rz-tooltip-content { background: var(--lt-ink-1); color: #fff; font-size: 12.5px; }
/* --- Side-dialog drawers: pinned footer, scrolling body -----------------
Radzen's .rz-dialog-side is a plain (non-flex) block and its content
wrapper is content-height, so a drawer's height:100% (.lt-drawer) had no
definite height to resolve against — the whole panel scrolled and carried
the Save/Cancel footer off-screen. Make the panel a full-height flex
column and let the content wrapper fill it, so only .lt-drawer-body scrolls
while .lt-drawer-foot stays pinned at the bottom. */
.rz-dialog-side.rz-dialog-side-position-right,
.rz-dialog-side.rz-dialog-side-position-left {
display: flex;
flex-direction: column;
overflow: hidden;
}
.rz-dialog-side-position-right > .rz-dialog-side-content,
.rz-dialog-side-position-left > .rz-dialog-side-content {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.rz-dialog-side-content > .lt-drawer { flex: 1 1 auto; min-height: 0; }
/* --- RadzenLayout shell -------------------------------------------------
The app shell is RadzenLayout: header row, responsive left nav sidebar,
scrolling body, and an on-demand right panel (SidePanelHost) that hosts
the drawer components. The grid reflows the body around both sidebars,
which is what makes the drawers non-blocking — no mask, no overlap. */
.lt-app .rz-layout {
flex: 1; min-height: 0; height: auto;
--rz-sidebar-width: 236px;
background: transparent;
}
/* The .lt-header div (and the banner strips) paint their own chrome. */
.lt-app .rz-header { background: transparent; border-bottom: none; box-shadow: none; min-height: 0; }
.lt-header .rz-sidebar-toggle {
background: transparent; border: none; color: rgba(255,255,255,0.8);
margin: 0; padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.lt-header .rz-sidebar-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* The .lt-sidebar / .lt-side-panel content divs own their padding — the theme's would double it
(and keep a collapsed panel 25px wide, since width:0 doesn't remove padding). */
.lt-nav-sidebar, .lt-side-panel { padding: 0; }
.lt-nav-sidebar { background: var(--lt-surface); }
/* Pages bring their own scroller (.lt-main / .drill-shell), so the body is just a flex viewport.
min-width:0 lets the 1fr body track shrink below its content's min-content width — without it,
a wide table pushes the right panel past the viewport edge instead of yielding space to it. */
.lt-app .rz-body { display: flex; padding: 0; margin: 0; overflow: hidden; background: transparent; min-width: 0; }
/* Slim copyright footer row (spans the full grid width, below both sidebars). */
.lt-app .rz-footer { padding: 0; background: var(--lt-surface); border-top: 1px solid var(--lt-line); }
.lt-footer {
padding: 7px 20px; text-align: center;
font-size: 11.5px; color: var(--lt-ink-5); letter-spacing: 0.01em;
}
/* --- The on-demand right drawer panel (SidePanelHost) ------------------
Radzen's documented OVERLAY sidebar recipe (blazor.radzen.com/layout): the layout is the
positioning context and the panel is absolute over it — it floats above the body instead of
pushing it. Being out of flow, it contributes nothing to the grid's rz-sidebar-2 column, so the
body keeps its full width. The optional .lt-side-panel-mask (Radzen's own rz-dialog-mask class)
sits between the page and the panel for modal opens. */
.lt-app .rz-layout { position: relative; }
/* .rz-layout > prefix: the theme pins in-layout sidebars back to position:static at (0,2,0)
specificity, so the overlay rule has to match it to win. */
.rz-layout > .lt-side-panel {
/* grid-area:auto — the theme still assigns rz-sidebar-2, and an absolutely positioned grid
child resolves its insets against its grid AREA, not the layout; left:auto — the theme's
base .rz-sidebar sets left:0, which over-constrains and beats right:0 in LTR. */
position: absolute; grid-area: auto; top: 0; right: 0; bottom: 0; left: auto; z-index: 5;
background: var(--lt-surface); border-left: 1px solid var(--lt-line);
box-shadow: -12px 0 32px rgba(15, 23, 42, 0.14);
}
.rz-layout > .lt-side-panel.rz-sidebar-collapsed { box-shadow: none; border-left: none; }
.lt-side-panel-mask { position: absolute; inset: 0; z-index: 4; }
.lt-side-panel-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.lt-side-panel-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 16px 22px 8px; flex: 0 0 auto;
}
.lt-side-panel-title { font-family: var(--lt-font-display); font-weight: 800; font-size: 17px; }
.lt-side-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 22px 16px; }
.lt-side-panel-body > * { flex: 1; min-height: 0; }
*:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: oklch(85% 0.015 235); border-radius: 6px; }
/* Radzen spacing utilities are !important, so scope + !important to beat them */
.drill-content .rz-p-0 { padding: 0 !important; }