.blur {
    backdrop-filter: blur(10px);
}

.dialog-background {
    background-color: transparent;
}

.dialog-background-title {
    background: #8ba7c4;
}

.dialog-background-surface {
    background: rgb(from var(--mud-palette-surface) r g b / 75%);
}

.dx-combobox {
    z-index: 1001; /* Or a higher value than the dialog's z-index */
}

.mud-dialog {
    z-index: 1000; /* Or a lower value than the combobox's z-index */
}

/* This style applies ONLY when validation fails, making the border BRIGHT red */
.invalid.dx-textbox,
.invalid.dx-spinedit,
.invalid.dx-radiobutton-group {
    border: 1px solid #dc2626; /* A bright, strong red, e.g., Tailwind's red-600 */
}

    /* Optional: Update the focus ring to match the bright red error state */
    .invalid.dx-textbox:focus-within,
    .invalid.dx-spinedit:focus-within,
    .invalid.dx-radiobutton-group:focus-within {
        border-color: #dc2626;
        box-shadow: 0 0 0 2px #f87171; /* A medium red glow */
    }