.app-date-input {
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.app-date-input::placeholder {
    color: #94a3b8;
}

.app-date-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.flatpickr-calendar {
    border: 1px solid #d8e0ec;
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .16);
    color: #0f172a;
    overflow: hidden;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none;
}

.flatpickr-months {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 8px;
}

.flatpickr-current-month {
    font-size: 16px;
    padding-top: 4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #0f172a;
    font-weight: 600;
}

.flatpickr-weekdays {
    background: #fff;
}

span.flatpickr-weekday {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.flatpickr-day {
    border-radius: 6px;
    color: #172036;
    font-weight: 500;
}

.flatpickr-day.today {
    border-color: #22c55e;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #eaf2ff;
    border-color: #bfdbfe;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #94a3b8;
}