html, body {
    margin: 0;
    color: var(--rz-text-color);
    background: var(--rz-body-background-color);
}

/* Muted copy — not rz-color-secondary (that is the brand secondary color). */
.om-text-muted {
    color: var(--rz-text-secondary-color) !important;
}

/* Prefer Radzen link tokens over Bootstrap's fixed blue. */
a:not(.rz-button):not(.rz-navigation-item-link) {
    color: var(--rz-link-color, var(--rz-primary));
}
a:not(.rz-button):not(.rz-navigation-item-link):hover {
    color: var(--rz-link-hover-color, var(--rz-primary));
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--rz-danger, #e50000);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.user-select-all {
    user-select: all;
    word-break: break-all;
}

/*
 * Identity / Bootstrap auth forms must follow the active Radzen theme.
 * Without this, form-control / form-floating keep light Bootstrap colors
 * and become unreadable on dark (or other) themes.
 */
.public-layout,
.om-account-layout {
    --bs-body-color: var(--rz-text-color);
    --bs-body-color-rgb: unset;
    --bs-body-bg: var(--rz-body-background-color);
    --bs-secondary-color: var(--rz-text-secondary-color);
    --bs-border-color: var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 16%, transparent));
    --bs-primary: var(--rz-primary);
    --bs-link-color: var(--rz-link-color, var(--rz-primary));
    --bs-link-hover-color: var(--rz-link-hover-color, var(--rz-primary));
}

.public-layout .form-control,
.public-layout .form-select,
.public-layout .form-floating > .form-control,
.public-layout .form-floating > .form-select,
.om-account-layout .form-control,
.om-account-layout .form-select,
.om-account-layout .form-floating > .form-control,
.om-account-layout .form-floating > .form-select {
    color: var(--rz-text-color) !important;
    background-color: var(--rz-input-background-color, var(--rz-base-100, var(--rz-card-background-color))) !important;
    border-color: var(--rz-input-border, var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 18%, transparent))) !important;
    caret-color: var(--rz-text-color);
}

.public-layout .form-control:focus,
.public-layout .form-select:focus,
.om-account-layout .form-control:focus,
.om-account-layout .form-select:focus {
    color: var(--rz-text-color) !important;
    background-color: var(--rz-input-background-color, var(--rz-base-100, var(--rz-card-background-color))) !important;
    border-color: var(--rz-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--rz-primary) 28%, transparent);
}

.public-layout .form-control::placeholder,
.om-account-layout .form-control::placeholder {
    color: var(--rz-text-secondary-color);
    opacity: 0.85;
}

/*
 * Bootstrap form-floating keeps the placeholder transparent so only the
 * floating label shows. Our theme placeholder color above must not win.
 */
.public-layout .form-floating > .form-control::placeholder,
.public-layout .form-floating > .form-control-plaintext::placeholder,
.om-account-layout .form-floating > .form-control::placeholder,
.om-account-layout .form-floating > .form-control-plaintext::placeholder {
    color: transparent !important;
    opacity: 1;
}

.public-layout .form-floating > .form-control::-moz-placeholder,
.public-layout .form-floating > .form-control-plaintext::-moz-placeholder,
.om-account-layout .form-floating > .form-control::-moz-placeholder,
.om-account-layout .form-floating > .form-control-plaintext::-moz-placeholder {
    color: transparent !important;
    opacity: 1;
}

/*
 * Radzen Material FormField already shows Text as the empty-state label.
 * A Placeholder on the inner input stacks on top of that label.
 */
.rz-form-field:not(:focus-within) .rz-form-field-content input::placeholder,
.rz-form-field:not(:focus-within) .rz-form-field-content textarea::placeholder {
    color: transparent !important;
}

.public-layout .form-control:disabled,
.om-account-layout .form-control:disabled {
    background-color: color-mix(in srgb, var(--rz-text-color) 6%, var(--rz-body-background-color)) !important;
    color: var(--rz-text-secondary-color) !important;
}

.public-layout .form-floating > label,
.om-account-layout .form-floating > label {
    color: var(--rz-text-secondary-color) !important;
}

.public-layout .form-floating > .form-control:focus ~ label,
.public-layout .form-floating > .form-control:not(:placeholder-shown) ~ label,
.om-account-layout .form-floating > .form-control:focus ~ label,
.om-account-layout .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--rz-text-secondary-color) !important;
}

/* Kill Bootstrap's light “notch” fill behind floating labels. */
.public-layout .form-floating > label::after,
.om-account-layout .form-floating > label::after {
    background-color: transparent !important;
}

.public-layout .btn-primary,
.om-account-layout .btn-primary {
    color: var(--rz-text-contrast-color, #fff) !important;
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

.public-layout .btn-primary:hover,
.om-account-layout .btn-primary:hover {
    filter: brightness(1.05);
}

.public-layout .btn-link,
.om-account-layout .btn-link {
    color: var(--rz-link-color, var(--rz-primary)) !important;
}

.public-layout .text-danger,
.om-account-layout .text-danger,
.public-layout .validation-message,
.om-account-layout .validation-message {
    color: var(--rz-danger, #e11d48) !important;
}

.public-layout .text-muted,
.public-layout .text-secondary,
.om-account-layout .text-muted,
.om-account-layout .text-secondary {
    color: var(--rz-text-secondary-color) !important;
}

.public-layout .alert-danger,
.om-account-layout .alert-danger {
    color: var(--rz-danger, #e11d48);
    background: color-mix(in srgb, var(--rz-danger, #e11d48) 12%, var(--rz-body-background-color));
    border-color: color-mix(in srgb, var(--rz-danger, #e11d48) 35%, transparent);
}

.public-layout hr,
.om-account-layout hr {
    border-color: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
    opacity: 1;
}

.public-layout .form-check-input,
.om-account-layout .form-check-input {
    background-color: var(--rz-input-background-color, var(--rz-base-100));
    border-color: var(--rz-base-300, color-mix(in srgb, var(--rz-text-color) 25%, transparent));
}

.public-layout .form-check-input:checked,
.om-account-layout .form-check-input:checked {
    background-color: var(--rz-primary);
    border-color: var(--rz-primary);
}