/* Re-themes the stock Radzen Humanistic/Humanistic-Dark palettes to the UzEx Global corporate style by overriding Radzen's own design-token variables, then patches a handful of selectors Radzen does not expose as tokens. RadzenTheme injects the active theme's stylesheet into at runtime (after this file, which is statically linked in index.html), so equal-specificity declarations here would otherwise lose the cascade to the theme file whenever RadzenAppearanceToggle swaps themes. Every declaration below is !important for that reason: this file's sole purpose is to unconditionally win over the loaded theme. */ :root { --rz-primary: var(--uzex-blue-600) !important; --rz-primary-light: var(--uzex-blue-500) !important; --rz-primary-lighter: var(--uzex-blue-100) !important; --rz-primary-dark: var(--uzex-blue-700) !important; --rz-primary-darker: var(--uzex-blue-700) !important; --rz-on-primary: #ffffff !important; --rz-on-primary-light: #ffffff !important; --rz-on-primary-lighter: var(--uzex-blue-700) !important; --rz-text-color: var(--uzex-text) !important; --rz-text-title-color: var(--uzex-text) !important; --rz-text-secondary-color: var(--uzex-text-muted) !important; --rz-text-font-family: var(--uzex-font-family) !important; --rz-border-radius: var(--uzex-radius-button) !important; --rz-card-border-radius: var(--uzex-radius-panel) !important; /* Header: white, bordered, restrained */ --rz-header-background-color: var(--uzex-surface) !important; --rz-header-color: var(--uzex-text) !important; --rz-header-border: 1px solid var(--uzex-border) !important; --rz-header-shadow: none !important; --rz-header-min-height: var(--uzex-header-height) !important; /* Body / layout */ --rz-layout-background-color: var(--uzex-surface-alt) !important; --rz-body-background-color: var(--uzex-surface) !important; --rz-layout-body-background-color: var(--uzex-surface) !important; --rz-layout-body-padding: 0 !important; /* Sidebar shell: dark navy in both light and dark app themes */ --rz-sidebar-background-color: var(--uzex-navy-900) !important; --rz-sidebar-color: var(--uzex-text-inverse) !important; --rz-sidebar-border-inline-end: 1px solid var(--uzex-navy-700) !important; --rz-sidebar-width: var(--uzex-sidebar-width) !important; --rz-sidebar-z: 950 !important; --rz-sidebar-toggle-color: var(--uzex-text-muted) !important; --rz-sidebar-toggle-background-color: transparent !important; --rz-sidebar-toggle-border: none !important; --rz-sidebar-toggle-padding: 0 !important; --rz-sidebar-toggle-margin-inline-end: 0 !important; --rz-sidebar-toggle-hover-color: var(--uzex-text) !important; --rz-sidebar-toggle-hover-background-color: var(--uzex-surface-alt) !important; --rz-sidebar-toggle-hover-border-radius: 10px !important; --rz-sidebar-toggle-focus-outline: 2px solid var(--uzex-blue-500) !important; --rz-sidebar-toggle-focus-outline-offset: 2px !important; /* Panel menu (sidebar navigation) - three deliberately distinct tiers. Radzen's own Humanistic theme already ships separate 1st/2nd/3rd-level token families (confirmed in the shipped humanistic.css: 1st level defaults to font-weight 600 + --rz-text-contrast-color, 2nd level to font-weight 400 + color:inherit); this file had been overriding both 1st and 2nd level color to the same muted tone, which is why modules and pages used to look almost identical. Level 1 (module) now stays bold and bright; level 2 (page) is regular-weight, smaller and muted; level 3 (reserved for future sub-pages, not used yet) goes smaller and more muted again via the plain selector further below, since Radzen does not ship a 3rd-level font-size token. */ --rz-panel-menu-icon-color: var(--uzex-text-inverse-muted) !important; --rz-panel-menu-item-color: var(--uzex-text-inverse) !important; --rz-panel-menu-font-weight: 700 !important; --rz-panel-menu-item-background-color: transparent !important; --rz-panel-menu-item-border: transparent !important; --rz-panel-menu-item-hover-background-color: var(--uzex-navy-700) !important; --rz-panel-menu-item-hover-color: var(--uzex-text-inverse) !important; --rz-panel-menu-item-active-background-color: var(--uzex-blue-700) !important; --rz-panel-menu-item-active-color: #ffffff !important; --rz-panel-menu-item-active-indicator: var(--uzex-blue-500) !important; --rz-panel-menu-item-border-radius: var(--uzex-radius-nav) !important; --rz-panel-menu-item-2nd-level-border-radius: var(--uzex-radius-nav) !important; --rz-panel-menu-item-3rd-level-border-radius: var(--uzex-radius-nav) !important; --rz-panel-menu-item-2nd-level-background-color: transparent !important; --rz-panel-menu-item-2nd-level-color: var(--uzex-text-inverse-muted) !important; --rz-panel-menu-item-2nd-level-font-size: 0.8125rem !important; --rz-panel-menu-item-2nd-level-hover-background-color: var(--uzex-navy-700) !important; --rz-panel-menu-item-2nd-level-hover-color: var(--uzex-text-inverse) !important; --rz-panel-menu-item-2nd-level-active-background-color: var(--uzex-blue-700) !important; --rz-panel-menu-item-2nd-level-active-color: #ffffff !important; --rz-panel-menu-item-2nd-level-offset: 4.5rem !important; --rz-panel-menu-item-3rd-level-background-color: transparent !important; --rz-panel-menu-item-3rd-level-color: var(--uzex-text-inverse-muted) !important; --rz-panel-menu-item-3rd-level-hover-background-color: var(--uzex-navy-700) !important; --rz-panel-menu-item-3rd-level-hover-color: var(--uzex-text-inverse) !important; --rz-panel-menu-item-3rd-level-active-background-color: var(--uzex-blue-700) !important; --rz-panel-menu-item-3rd-level-active-color: #ffffff !important; /* Profile menu (header user dropdown) */ --rz-profile-menu-top-item-background-color: transparent !important; --rz-profile-menu-toggle-button-color: var(--uzex-text-muted) !important; --rz-profile-menu-background-color: var(--uzex-surface) !important; --rz-profile-menu-border: 1px solid var(--uzex-border) !important; --rz-profile-menu-border-radius: var(--uzex-radius-control) !important; --rz-profile-menu-padding-block: 0.25rem !important; --rz-profile-menu-item-hover-background-color: var(--uzex-blue-100) !important; /* Cards (used by AuthLayout) */ --rz-card-shadow: var(--uzex-shadow-md) !important; /* DataGrid (RadzenDataGrid) - one shared standard for every current and future management table (Roles, Users, News Categories, Media, News, Audit Logs). Values come from the --uzex-table-* tokens in variables.css; feature .razor.css files must not redeclare any of this, only feature-specific layout (toolbar, panel) belongs there. Radzen's own ".rz-datatable" rule already applies border-radius as overflow:hidden, so rounding this variable alone correctly clips the header/rows/pager inside the rounded outer corners - no extra clipping CSS needed. */ --rz-grid-background-color: var(--uzex-table-bg) !important; --rz-grid-header-background-color: var(--uzex-table-header-bg) !important; --rz-grid-header-color: var(--uzex-table-header-text) !important; --rz-grid-stripe-background-color: var(--uzex-table-row-alt-bg) !important; --rz-grid-stripe-odd-background-color: var(--uzex-table-row-bg) !important; --rz-grid-hover-background-color: var(--uzex-table-hover-bg) !important; --rz-grid-hover-color: var(--uzex-text) !important; --rz-grid-selected-background-color: var(--uzex-table-selected-bg) !important; --rz-grid-selected-color: var(--uzex-table-selected-text) !important; --rz-grid-border: 1px solid var(--uzex-table-border) !important; --rz-grid-cell-border: 1px solid var(--uzex-table-border) !important; /* Both stock Humanistic themes ship this as "none" - header and body rows are left to separate purely by background-color contrast, which collapses in dark mode because the header background is identical to one of the two alternating row shades. An explicit (themed) line keeps the header visually anchored above the data in both themes. */ --rz-grid-header-cell-border-bottom: 1px solid var(--uzex-table-border) !important; --rz-grid-header-cell-border: 1px solid var(--uzex-table-border) !important; --rz-grid-border-radius: var(--uzex-table-radius) !important; --rz-grid-cell-padding: var(--uzex-table-cell-padding) !important; --rz-grid-header-cell-padding: var(--uzex-table-header-cell-padding) !important; --rz-grid-state-transition: var(--uzex-table-row-transition) !important; --rz-grid-shadow: none !important; /* Pager: same background as the table body so it reads as one rounded unit rather than a separate block underneath. */ --rz-pager-background-color: var(--uzex-table-bg) !important; /* Focus ring: both stock Humanistic themes use a muted blue-gray (#466791) for focused inputs rather than the app's own brand blue, and define no outline at all - swap in the real brand color so focus state is unambiguous and on-brand in both themes. */ --rz-input-focus-border: 1px solid var(--uzex-blue-500) !important; --rz-border-focus: 1px solid var(--uzex-blue-500) !important; } /* Neither stock Humanistic theme gives RadzenDialog an actual border - it relies solely on box-shadow, which reads as essentially invisible once the page behind it is already dark. A themed 1px edge keeps the dialog boundary legible in both themes without changing its shadow/elevation. */ .rz-dialog { border: 1px solid var(--uzex-border-strong) !important; } /* Radzen's sidebar toggle button ships a solid filled background, a permanent border and a ~51px box by default (it expects a colored header). Restyle to a restrained, transparent-by-default 40px icon button with a subtle hover/pressed tint and a visible focus ring. */ .rz-sidebar-toggle { color: var(--uzex-text-muted) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; transition: background-color 0.15s ease, color 0.15s ease !important; } .rz-sidebar-toggle:active { background-color: var(--uzex-blue-100) !important; } /* RadzenHeader sizes to its content rather than strictly honoring --rz-header-min-height; pin it explicitly so header-end controls never overflow the header's white background. */ .rz-header { min-height: var(--uzex-header-height) !important; } /* Subtle divider under the brand/logo block at the top of the sidebar. */ .rz-sidebar .app-brand { border-bottom: 1px solid var(--uzex-navy-700); } /* Give the profile trigger a comfortable hit target and hover affordance without Radzen's default solid-primary background block. */ .rz-profile-menu { border-radius: var(--uzex-radius-control) !important; transition: background-color 0.15s ease; } .rz-profile-menu:hover { background-color: var(--uzex-surface-alt); } /* Restrained circular row-action buttons inside any management-table grid (Edit/Delete etc.) - global standard, automatically applied to every current and future RadzenDataGrid. Scoped to ".rz-data-grid" so icon-only buttons elsewhere in the app (sidebar toggle, header controls, dialogs) are unaffected. Kept slightly larger than Radzen's 28px default for a comfortable touch target while staying compact. */ .rz-data-grid .rz-button-icon-only { width: 32px !important; height: 32px !important; border-radius: var(--uzex-radius-full) !important; transition: background-color 0.15s ease, color 0.15s ease !important; } .rz-data-grid .rz-button-icon-only.rz-light { background-color: var(--uzex-blue-100) !important; color: var(--uzex-blue-600) !important; } .rz-data-grid .rz-button-icon-only.rz-light:not(.rz-state-disabled):hover { background-color: var(--uzex-blue-500) !important; color: #ffffff !important; } /* Soft-red, not the solid Danger fill used by the final confirmation dialog's own Delete button - that one should stay visually stronger since it is the last, irreversible step. */ .rz-data-grid .rz-button-icon-only.rz-danger { background-color: var(--rz-danger-lighter) !important; color: var(--rz-danger-dark) !important; } .rz-data-grid .rz-button-icon-only.rz-danger:not(.rz-state-disabled):hover { background-color: var(--rz-danger) !important; color: #ffffff !important; } .rz-data-grid .rz-button-icon-only:focus-visible { outline: 2px solid var(--uzex-blue-500) !important; outline-offset: 2px !important; } .rz-data-grid .rz-button-icon-only.rz-state-disabled { opacity: 0.5 !important; }