.date-field {
    position: relative;
    width: 100%;
    min-width: 150px;
}

.date-input,
.flatpickr-input {
    height: 44px;
    padding: 0.55rem 2.5rem 0.55rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid #ced4da;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236c757d' viewBox='0 0 24 24'%3E%3Cpath d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v13A2.5 2.5 0 0 1 19.5 22h-15A2.5 2.5 0 0 1 2 19.5v-13A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1zm12.5 8h-15v9.5c0 .276.224.5.5.5h14a.5.5 0 0 0 .5-.5V10zM6 8h12V6.5a.5.5 0 0 0-.5-.5H18v1a1 1 0 1 1-2 0V6H8v1a1 1 0 1 1-2 0V6H4.5a.5.5 0 0 0-.5.5V8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.date-input::placeholder,
.flatpickr-input::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

.date-input:focus,
.flatpickr-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
    outline: none;
}

.date-input.input-validation-error,
.flatpickr-input.input-validation-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}

.date-input:disabled,
.date-input[readonly],
.flatpickr-input:disabled,
.flatpickr-input[readonly] {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}