:root {
    --rz-primary: var(--color-primary);
    --rz-primary-light: var(--color-primary-muted);
    --rz-primary-dark: var(--color-primary-hover);
    --rz-on-primary: var(--color-text-on-primary);
    --rz-base-background-color: var(--color-bg-elevated);
    --rz-text-color: var(--color-text-primary);
    --rz-text-secondary-color: var(--color-text-muted);
    --rz-secondary: var(--color-bg-secondary);
    --rz-secondary-lighter: var(--color-bg-primary);
    --rz-on-secondary: var(--color-text-secondary);
    --rz-base-100: var(--color-bg-primary);
    --rz-base-200: var(--color-bg-secondary);
    --rz-base-300: var(--color-slate-100);
    --rz-base-400: var(--color-slate-200);
    --rz-base-500: var(--color-slate-300);
    --rz-border-normal: var(--color-border-default);
    --rz-grid-header-background-color: var(--color-bg-tertiary);
    --rz-grid-data-border-color: var(--color-border-default);
    --rz-card-background-color: var(--color-bg-elevated);
    --rz-card-border-radius: var(--radius-lg);
    --rz-panel-menu-item-border-radius: var(--radius-md);
    --rz-input-border-radius: var(--radius-md);
    --rz-button-border-radius: var(--radius-md);
    --rz-dialog-border-radius: var(--radius-xl);
    --rz-dialog-mask-background-color: var(--color-overlay-mask);
    --rz-danger: var(--color-error-icon);
    --rz-success: var(--color-success-icon);
    --rz-warning: var(--color-warning-icon);
    --rz-info: var(--color-info-icon);
    --rz-grid-column-resizer-width: 0.625rem;
    --rz-grid-column-resizer-helper-width: 0.125rem;
    --rz-grid-column-resizer-helper-background-color: var(--color-blue-300);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-dialog .rz-dialog {
    animation: fadeInScale var(--duration-slow) var(--ease-out) forwards;
}

.rz-component,
.rz-button,
.rz-inputtext,
.rz-dropdown,
.rz-badge,
.rz-panel-menu,
.rz-data-grid,
.rz-paginator {
    font-family: var(--font-sans);
}

.rz-card,
.rz-panel,
.rz-fieldset,
.rz-datatable,
.rz-data-grid,
.rz-dialog,
.rz-notification-item,
.rz-tabview-nav li a {
    border-color: var(--color-border-default);
    box-shadow: none;
}

.rz-card,
.rz-panel,
.rz-fieldset,
.rz-datatable,
.rz-data-grid {
    background: var(--color-bg-surface);
}

.rz-switch.rz-switch-checked .rz-switch-circle:before {
    background: var(--color-primary);
}

.rz-card.metric-card {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 3px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-elevated);
    box-shadow: none;
}

.rz-textbox.widget-textbox {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 3px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    box-shadow: none;
    color: var(--color-text-secondary);
    cursor: default;
    min-width: 0;
}

.rz-button {
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.rz-button.rz-primary {
    box-shadow: var(--shadow-primary-button);
}

.rz-button:not(.rz-primary):not(.rz-danger):hover {
    background: var(--color-bg-secondary);
}

.rz-inputtext,
.rz-dropdown,
.rz-datepicker,
.rz-numeric,
.rz-multiselect {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
}

.rz-state-focus,
.rz-inputtext:focus,
.rz-dropdown:focus-within,
.rz-datepicker:focus-within,
.rz-numeric:focus-within {
    box-shadow: var(--shadow-glow-blue) !important;
    border: 1px solid var(--color-border-focus) !important;
}

/* Inside FormField — no border on inner elements, FormField handles it */
.rz-form-field .rz-inputtext:focus,
.rz-form-field .rz-dropdown:focus-within,
.rz-form-field .rz-datepicker:focus-within,
.rz-form-field .rz-numeric:focus-within {
    border: none !important;
    box-shadow: none !important;
}

/* ── Sidebar (design-system sample) ────────────────────── */
.sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-sidebar);
    color: var(--color-text-inverse);
    border-right: 1px solid var(--sidebar-border);
    overflow: hidden;
    transition: width var(--transition-slow);
}

.sidebar__logo {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--sidebar-border);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.02em;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sidebar__logo:hover {
    opacity: 0.8;
}

.sidebar__logo:visited,
.sidebar__logo:active {
    color: inherit;
    text-decoration: none;
}

.sidebar__logo-text {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.sidebar__logo svg {
    flex-shrink: 0;
}

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.sidebar__section-label {
    padding: var(--space-4) var(--space-5) var(--space-1);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-text-label);
    white-space: nowrap;
}

.sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    margin: 1px var(--space-2);
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.sidebar__item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-hover);
}

.sidebar__item--active {
    background: var(--sidebar-active);
    color: var(--color-blue-300);
}

.sidebar__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 20px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar__item--active .sidebar__icon {
    opacity: 1;
}

.sidebar__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__item-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.sidebar__chevron-btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: inherit;
}

.sidebar__chevron-btn:hover {
    background: var(--sidebar-hover-strong);
}

.sidebar__chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.4;
    transition: transform var(--transition-fast);
}

.sidebar__chevron--open {
    transform: rotate(180deg);
}

.sidebar__children {
    padding-left: var(--space-4);
}

.sidebar__children .sidebar__item {
    font-size: var(--text-xs);
    min-height: 32px;
    padding: var(--space-1) var(--space-5);
}

/* Badges */
.sidebar__badges {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}

.sidebar__badge {
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
}

.sidebar__badge--info {
    background: var(--sidebar-active);
    color: var(--color-blue-300);
}

.sidebar__badge--error {
    background: var(--sidebar-badge-bg, var(--sidebar-badge-error));
    color: var(--sidebar-badge-color, var(--color-error-icon));
    border-color: var(--sidebar-badge-border, var(--sidebar-badge-color, var(--color-error-icon)));
}

.sidebar__badge--warning {
    background: var(--sidebar-badge-bg, var(--sidebar-badge-warning));
    color: var(--sidebar-badge-color, var(--color-warning-icon));
    border-color: var(--sidebar-badge-border, var(--sidebar-badge-color, var(--color-warning-icon)));
}

/* Footer */
.sidebar__footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.sidebar__user {
    font-size: var(--text-sm);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.sidebar__user small {
    display: block;
    font-size: var(--text-2xs);
    color: var(--sidebar-text-dim);
}

.sidebar__collapse-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text-dim);
    transition: color var(--transition-fast), background var(--transition-fast);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.sidebar__collapse-btn:hover {
    background: var(--sidebar-hover-medium);
    color: var(--sidebar-text-hover-dim);
}

.sidebar__collapse-btn svg {
    width: 16px;
    height: 16px;
}

/* Collapsed state */
.sidebar--collapsed .sidebar__logo-text,
.sidebar--collapsed .sidebar__label,
.sidebar--collapsed .sidebar__section-label,
.sidebar--collapsed .sidebar__user,
.sidebar--collapsed .sidebar__badges,
.sidebar--collapsed .sidebar__chevron {
    display: none;
}

.sidebar--collapsed .sidebar__item {
    justify-content: center;
    padding: var(--space-2) 0;
    margin: 1px var(--space-1);
}

.sidebar--collapsed .sidebar__children {
    padding-left: 0;
}

.sidebar--collapsed .sidebar__footer {
    justify-content: center;
    padding: var(--space-3) var(--space-1);
}

.sidebar--collapsed .sidebar__logo {
    justify-content: center;
    padding: 0;
}

/* ── DataGrid — design-system aligned ───────────────────── */

/* Wrapper: remove heavy default borders, use card-like surface */
.rz-datatable,
.rz-data-grid {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Header row */
.rz-datatable-thead th,
.rz-grid-table thead th {
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-default);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Sortable header interaction */
.rz-grid-table thead th.rz-sortable-column {
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}

.rz-grid-table thead th.rz-sortable-column:hover {
    color: var(--color-text-primary);
}

/* Column resize handle */
.rz-column-resizer {
    z-index: 2;
}

.rz-column-resizer::after {
    transition: width var(--transition-fast), background-color var(--transition-fast);
}

.rz-column-resizer:hover::after,
.rz-column-resizer:active::after {
    width: 0.1875rem;
    background-color: var(--rz-grid-column-resizer-helper-background-color);
}

/* Sort icon */
.rz-sortable-column .rzi-grid-sort {
    opacity: 0.4;
    font-size: 10px;
    margin-left: var(--space-1);
    transition: opacity var(--transition-fast);
}

.rz-sortable-column:hover .rzi-grid-sort,
.rz-sortable-column .rzi-grid-sort.rzi-sort-asc,
.rz-sortable-column .rzi-grid-sort.rzi-sort-desc {
    opacity: 1;
    color: var(--color-primary);
}

/* Body rows */
.rz-grid-table tbody tr {
    transition: background var(--transition-fast);
}

.rz-grid-table tbody tr:hover td {
    background: var(--color-bg-tertiary);
}

/* Filter row */
.rz-grid-table thead .rz-filter-row th {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-default);
    padding: var(--space-1) var(--space-2);
}

.rz-grid-table .rz-filter-row .rz-cell-filter {
    padding: var(--space-1) var(--space-2);
}

/* Filter input inside grid */
.rz-grid-table .rz-filter-row .rz-inputtext {
    height: 32px;
    min-height: 32px;
    font-size: var(--text-xs);
    padding: 0 var(--space-2);
    background: var(--color-bg-primary);
}

/* Filter menu button */
.rz-cell-filter-clear,
.rz-cell-filter-btn {
    color: var(--color-icon-muted);
    transition: color var(--transition-fast);
}

.rz-cell-filter-clear:hover,
.rz-cell-filter-btn:hover {
    color: var(--color-primary);
}

.rz-tabview-nav li a {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rz-tabview-selected a {
    color: var(--color-primary);
}

.rz-notification-item {
    background: var(--color-bg-surface);
    border: 1px solid var(--mosys-notification-border-color, var(--color-border-default));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ── Forms ──────────────────────────────────────────────── */

/* --- Form field container (RadzenFormField) ------------- */
.rz-form-field {
    width: 100%;
}

.rz-form-field .rz-form-field-content {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    min-height: var(--form-field-height, 44px);
    padding: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rz-form-field .rz-form-field-content:hover {
    border-color: var(--color-primary-muted);
}

.rz-form-field:focus-within .rz-form-field-content {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-glow-blue);
    background: var(--color-bg-primary);
}

/* --- Floating label styling (inside RadzenFormField) ---- */
.rz-form-field .rz-form-field-label {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast), font-size var(--transition-fast);
}

.rz-form-field:focus-within .rz-form-field-label {
    color: var(--color-primary);
}

/* --- Inputs inside form fields: remove inner border ----- */
.rz-form-field .rz-inputtext,
.rz-form-field .rz-dropdown,
.rz-form-field .rz-numeric,
.rz-form-field .rz-password,
.rz-form-field .rz-multiselect,
.rz-form-field .rz-datepicker {
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* Dropdown trigger inside FormField — no extra border */
.rz-form-field .rz-dropdown-trigger,
.rz-form-field .rz-multiselect-trigger {
    border: none !important;
    background: transparent !important;
}

/* --- All inputs base styling ---------------------------- */
.rz-inputtext,
.rz-dropdown,
.rz-numeric,
.rz-password,
.rz-multiselect,
.rz-datepicker {
    height: var(--input-height, 28px);
    min-height: var(--input-height, 28px);
    font-size: var(--input-font-size, 12px);
    font-family: var(--font-sans);
    line-height: normal;
    border-radius: var(--radius-md);
    padding: 0 var(--input-padding-x, 10px);
    display: flex;
    align-items: center;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

/* TextBox is an <input> — can't use flexbox, use padding */
input.rz-inputtext {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    line-height: var(--input-height, 28px);
}

/* Dropdown label vertical centering */
.rz-dropdown .rz-dropdown-label {
    line-height: normal;
    padding: 0 var(--space-3);
    display: flex;
    align-items: center;
    height: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Inner inputs inside composite components — no own border */
.rz-datepicker .rz-inputtext,
.rz-numeric .rz-inputtext {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 100%;
    padding: 0;
}

/* --- Inputs inside FormField ----------------------------- */

/* All inputs inside FormField: fill container, no own border */
.rz-form-field .rz-inputtext,
.rz-form-field .rz-dropdown,
.rz-form-field .rz-numeric,
.rz-form-field .rz-password,
.rz-form-field .rz-multiselect,
.rz-form-field .rz-datepicker {
    height: 100%;
    min-height: unset;
}

/* TextBox inside FormField */
.rz-form-field input.rz-inputtext {
    line-height: normal;
    padding: var(--form-field-padding-top, 18px) var(--input-padding-x, 10px) var(--form-field-padding-bottom, 4px) var(--input-padding-x, 10px) !important;
}

/* Numeric inside FormField — the container */
.rz-form-field .rz-numeric {
    display: flex;
    align-items: flex-end;
    padding: 0;
}

/* Numeric input element inside FormField */
.rz-form-field .rz-numeric input {
    padding: var(--form-field-padding-top, 18px) var(--input-padding-x, 10px) var(--form-field-padding-bottom, 4px) var(--input-padding-x, 10px) !important;
    line-height: normal !important;
    height: auto !important;
}

/* Dropdown inside FormField */
.rz-form-field .rz-dropdown {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
}

/* Dropdown label inside FormField */
.rz-form-field .rz-dropdown .rz-dropdown-label {
    padding: var(--form-field-padding-top, 18px) 2rem var(--form-field-padding-bottom, 4px) var(--input-padding-x, 10px) !important;
    line-height: normal !important;
    height: auto !important;
    display: block;
}

/* Password inside FormField */
.rz-form-field .rz-password {
    padding: 18px 12px 4px 12px;
    line-height: normal;
}

.rz-inputtext:hover,
.rz-dropdown:hover,
.rz-numeric:hover,
.rz-password:hover,
.rz-multiselect:hover,
.rz-datepicker:hover {
    border-color: var(--color-border-strong);
}

/* --- Bare labels (NOT inside RadzenFormField) ----------- */
label:not(.rz-form-field-label) {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: var(--space-1);
    margin-top: var(--space-3);
    line-height: var(--leading-snug);
}

/* First bare label in a container shouldn't have top margin */
.rz-stack > label:not(.rz-form-field-label):first-child,
div > label:not(.rz-form-field-label):first-child {
    margin-top: 0;
}

/* --- Floating label inside FormField: keep Radzen default */
.rz-form-field-label {
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}

.rz-form-field .rz-form-field-content:has(input:-webkit-autofill) > .rz-form-field-label,
.rz-form-field .rz-form-field-content:has(input:autofill) > .rz-form-field-label {
    inset-inline-end: auto;
    inset-block-start: var(--rz-form-field-label-floating-top);
    padding-block-start: 0;
    padding-block-end: 0;
    transform: translate(0, 0);
    color: var(--rz-input-placeholder-color);
    background-color: var(--rz-form-field-label-floating-background-color);
    font-size: 0.75rem;
    line-height: 1rem;
    max-width: calc(100% - 1.5rem);
}

/* --- RadzenDropDown fullwidth fix ----------------------- */
.rz-dropdown {
    width: 100%;
}

/* --- RadzenNumeric -------------------------------------- */
.rz-numeric {
    display: inline-block;
    position: relative;
}

.rz-numeric .rz-inputtext {
    padding-right: var(--space-8);
}


/* --- Dropdown/Multiselect trigger (arrow button) ------- */
.rz-dropdown-trigger,
.rz-multiselect-trigger {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    color: var(--color-icon-muted);
}

/* --- RadzenPassword ------------------------------------- */
.rz-password {
    width: 100%;
}

/* --- RadzenCheckBox ------------------------------------- */
.rz-chkbox-box {
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border-strong);
    transition: all var(--transition-fast);
    width: 18px;
    height: 18px;
}

.rz-chkbox-box.rz-state-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- RadioButton ---------------------------------------- */
.rz-radiobutton-box {
    border: 2px solid var(--color-border-strong);
    transition: all var(--transition-fast);
}

.rz-radiobutton-box.rz-state-active {
    border-color: var(--color-primary);
}

.rz-radiobutton-icon {
    background: var(--color-primary);
}

.rz-radiobutton-label {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* --- Dropdown / Listbox items hover -------------------- */
.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-focused,
.rz-listbox-item:hover,
.rz-multiselect-item:hover {
    background: var(--color-bg-tertiary) !important;
    cursor: pointer;
}

.rz-dropdown-item.rz-state-highlight,
.rz-listbox-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

/* --- RadzenFieldset (form groups) ----------------------- */
.rz-fieldset {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-bg-surface);
}

.rz-fieldset-legend {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    padding: 0 var(--space-2);
}

/* --- Validation ----------------------------------------- */
.rz-message-error,
.validation-message {
    font-size: var(--text-xs);
    color: var(--color-error-text);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.rz-form-field.rz-state-invalid .rz-form-field-content {
    border-color: var(--color-error-icon) !important;
    box-shadow: var(--shadow-glow-error) !important;
}

/* --- Disabled state ------------------------------------- */
.rz-state-disabled,
.rz-inputtext:disabled,
.rz-dropdown.rz-state-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--color-bg-secondary) !important;
}

/* --- Placeholder ---------------------------------------- */
.rz-inputtext::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
    font-weight: var(--font-weight-regular);
}

/* --- Action buttons (form footer) ----------------------- */
.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border-default);
}

/* --- Buttons -------------------------------------------- */
.rz-button:not(.rz-numeric-button) {
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    min-height: 28px;
    gap: var(--space-1);
}

/* --- RadzenNumeric arrows — match dropdown trigger ------- */
.rz-numeric-button.rz-button {
    min-height: 0;
    padding: 0;
    inset-inline-end: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--color-icon-muted);
}

.rz-numeric-up.rz-button {
    top: 3px;
}

.rz-numeric-down.rz-button {
    bottom: 3px;
}

.rz-numeric-button.rz-button:hover {
    background: transparent !important;
    color: var(--color-text-primary);
}

.rz-numeric-button .rzi {
    font-size: 1.3125rem;
}

.rz-numeric-button .rzi.rzi-caret-up:before {
    content: "arrow_drop_up";
}

.rz-numeric-button .rzi.rzi-caret-down:before {
    content: "arrow_drop_down";
}

.rz-button.rz-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.rz-button.rz-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-primary-button-hover);
}

.rz-button.rz-danger {
    background: var(--color-error-icon);
    border-color: var(--color-error-icon);
    color: var(--color-text-on-primary);
}

.rz-button.rz-danger:hover {
    background: var(--color-red-600);
    border-color: var(--color-red-600);
}

.rz-button.rz-danger:disabled,
.rz-button.rz-danger[disabled] {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-default);
    color: var(--color-text-muted);
}

/* Danger Text variant (icon-only in tables) */
.rz-button.rz-variant-text.rz-danger {
    background: transparent;
    border: none;
    color: var(--color-error-icon);
}

.rz-button.rz-variant-text.rz-danger:hover {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.rz-button.rz-secondary,
.rz-split-button .rz-button.rz-secondary {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
}

.rz-button.rz-secondary:hover,
.rz-split-button .rz-button.rz-secondary:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-text-muted);
    color: var(--color-text-primary);
}

.rz-button.rz-light {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
}

.rz-button.rz-light:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

/* --- RadzenCard in forms -------------------------------- */
.rz-card {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.rz-card:hover {
    box-shadow: var(--shadow-md);
}

/* --- Tabs ----------------------------------------------- */
.rz-tabview-nav {
    border-bottom: 2px solid var(--color-border-default);
    gap: var(--space-1);
}

.rz-tabview-nav li a {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-4);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
}

.rz-tabview-nav li a:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rz-tabview-selected a {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold);
}

/* --- RadzenAlert ---------------------------------------- */
.rz-alert {
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4);
}

/* --- Dialog --------------------------------------------- */
.rz-dialog-content {
    padding: var(--space-4) var(--space-6);
}

.rz-dialog-titlebar {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-default);
}

.rz-dialog-title {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
}

/* --- Data grid cells ------------------------------------ */
.rz-grid-table tbody td {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
    padding: 6px var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}

/* All text inside cells inherits size */
.rz-grid-table tbody td * {
    font-size: inherit;
}

/* Remove alternating row heavy stripe — use very subtle bg */
.rz-datatable-striped .rz-grid-table tbody tr:nth-child(even) td {
    background: var(--color-bg-secondary);
}

/* Empty message */
.rz-data-grid .rz-datatable-empty-message td,
.rz-data-grid .rz-grid-table .rz-datatable-emptymessage {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Selected row */
.rz-grid-table tbody tr.rz-state-highlight td {
    background: var(--color-primary-light);
}

/* --- Pager ----------------------------------------------- */
.rz-paginator {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border-default);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
    font-size: var(--text-xs);
    min-height: 40px;
}

/* All pager buttons: compact squares */
.rz-paginator .rz-paginator-element {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.rz-paginator .rz-paginator-element:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Active page number */
.rz-paginator .rz-paginator-element.rz-state-active,
.rz-paginator .rz-state-active {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
}

/* Prev/Next text labels — make them icon-only looking */
.rz-paginator .rz-paginator-prev,
.rz-paginator .rz-paginator-next,
.rz-paginator .rz-paginator-first,
.rz-paginator .rz-paginator-last {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0;
    padding: 0;
}

/* Keep the icon visible inside nav buttons */
.rz-paginator .rz-paginator-prev .rzi,
.rz-paginator .rz-paginator-next .rzi,
.rz-paginator .rz-paginator-first .rzi,
.rz-paginator .rz-paginator-last .rzi {
    font-size: 16px;
}

/* Pager info text */
.rz-paginator .rz-paginator-info {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* Page size dropdown in pager */
.rz-paginator .rz-dropdown,
.rz-paginator .rz-paginator-page-size {
    font-size: var(--text-xs);
    height: 28px;
    min-height: 28px;
}

.rz-paginator .rz-dropdown {
    width: auto;
    min-width: 56px;
}

/* Page size label */
.rz-paginator .rz-paginator-page-sizes-label {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

/* --- Scrollbar improvements ----------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-slate-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-slate-400);
}

/* ── SmartIpInput ───────────────────────────────────────── */

.smart-ip-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.smart-ip-input {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
    height: 28px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: fit-content;
}

.smart-ip-input:focus-within {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-glow-blue);
}

/* Inside RadzenFormField — remove own border (FormField provides it) */
.rz-form-field .smart-ip-input {
    border: none;
    background: transparent;
    padding: 0;
    height: auto;
    box-shadow: none;
}

.rz-form-field .smart-ip-input:focus-within {
    border: none;
    box-shadow: none;
}

.smart-ip-dot {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    font-size: var(--text-md);
    line-height: 1;
    user-select: none;
}

.smart-ip-segment {
    width: 48px;
    height: 34px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: var(--text-base);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    outline: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    line-height: 34px;
    padding: 0;
}

.smart-ip-segment:focus {
    background: var(--color-bg-tertiary);
}

.smart-ip-segment::placeholder {
    color: var(--color-text-muted);
    opacity: 0.4;
    font-weight: var(--font-weight-regular);
}

.smart-ip-segment--error {
    color: var(--color-error-icon);
    background: var(--color-error-bg);
}

.smart-ip-delete {
    margin-left: var(--space-1);
}

.smart-ip-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-error-text);
    padding: var(--space-1) 0;
}

/* ── SNMP model cards ───────────────────────────────────── */

.snmp-add-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.snmp-model-card {
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-surface);
}

.snmp-model-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-tertiary);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.snmp-model-card--open .snmp-model-card__header {
    border-bottom: 1px solid var(--color-border-default);
}

.snmp-model-card__header:hover {
    background: var(--color-bg-secondary);
}

.snmp-model-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.snmp-model-card__body {
    padding: var(--space-3);
}

/* ── Expander ───────────────────────────────────────────── */

.expander {
    margin: var(--space-2) 0;
}

.expander__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.expander__toggle--left {
    justify-content: flex-start;
}

.expander__toggle--right {
    justify-content: flex-end;
}

.expander__toggle:hover {
    border-color: var(--color-primary-muted);
    color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.expander--open .expander__toggle {
    border-color: var(--color-primary-muted);
    color: var(--color-primary);
    background: var(--color-bg-secondary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.expander__icon {
    font-size: 18px !important;
    transition: transform var(--transition-fast);
}

.expander__title {
    user-select: none;
}

.expander__body {
    border: 1px solid var(--color-border-default);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--space-3);
    background: var(--color-bg-primary);
}


/* ── Equipment audit log dialog ───────────────────────── */
/* position у .rz-dialog НЕ переопределяем — Radzen сам позиционирует окно,
   и кнопка журнала якорится к нему как к позиционированному предку. */
.rz-dialog.equipment-audit-log-dialog {
    min-width: 600px;
    max-width: 95vw;
    max-height: 90vh;
}

/* Шапка по виду как у обычной модалки: фикс. высота + вертикальное центрирование. */
.rz-dialog.equipment-audit-log-dialog .rz-dialog-titlebar {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

/* Горизонтальный и вертикальный скролл, если данные не помещаются. */
.rz-dialog.equipment-audit-log-dialog .rz-dialog-content {
    overflow: auto;
}

.equipment-audit-log-dialog .equipment-audit-log-dialog__journal {
    position: absolute;
    top: 0;
    right: 3.75rem;
    /* высота равна титульной панели — кнопка центрируется на одной линии с крестиком */
    height: 3.5rem;
    display: flex;
    align-items: center;
    z-index: 1;
}

/* ── GridStack movable delete button ──────────────────── */
.rz-button.grid-movable-delete-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
    width: 28px !important;
    height: 28px !important;
    color: #6b6b6b !important;
}