.date-input {
    /* Neutral state */
    background-color: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 16px;
    color: #000000; /* Black text when not focused */
    width: 200px;
    outline: none;
    transition: all 0.2s ease-in-out;
}

/* Focused state */
.date-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #ffffff;
    color: #4b5563; /* Visible text when focused */
}

/* Placeholder text */
.date-input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Hover state */
.date-input:hover:not(:focus) {
    border-color: #b3b8c2;
    background-color: transparent;
}

/* Calendar picker indicator */
.date-input::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}