.validation-message {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

.modified.invalid .mud-input {
    border-color: #dc3545;
}

.modified.invalid .mud-input-label {
    color: #dc3545;
}

.modified.invalid .mud-input-slot {
    border-color: #dc3545;
}

.modified.invalid .mud-select {
    border-color: #dc3545;
}

.modified.invalid .mud-input-control {
    padding-bottom: 1.5rem;
}

.modified.invalid .mud-input-helper-text {
    color: #dc3545;
    position: absolute;
    bottom: 0;
}

/* For MudBlazor specific components */
.modified.invalid .mud-input-outlined {
    border-color: #dc3545 !important;
}

.modified.invalid .mud-input-outlined-border {
    border-color: #dc3545 !important;
}

.modified.invalid .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #dc3545 !important;
}

.modified.invalid .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #dc3545 !important;
}

/* For MudTextField */
.modified.invalid .mud-input-outlined-border {
    border-color: #dc3545 !important;
}

/* For MudSelect */
.modified.invalid .mud-select-input {
    border-color: #dc3545 !important;
}

/* For MudDatePicker */
.modified.invalid .mud-picker {
    border-color: #dc3545 !important;
}

/* Animation for validation messages */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-message {
    animation: fadeIn 0.3s ease-in-out;
}