/* Flatpickr dark theme overrides */
.flatpickr-wrapper {
    display: block;
    width: 100%;
}
.flatpickr-calendar.static {
    right: 0;
    left: auto;
}
.flatpickr-calendar.static.open {
    position: relative;
    top: .5rem;
    margin: 0 0 .5rem auto;
}
.flatpickr-calendar.static::before,
.flatpickr-calendar.static::after {
    right: 1.25rem;
    left: auto;
}
.flatpickr-calendar.arrowTop::before {
    border-bottom-color: var(--border);
}
.flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--surface);
}
/* flatpickr hardcodes a ~308px calendar with ~39px day cells, sized for a
   floating desktop dropdown. The primary device here is a phone, so this
   fills the field's own width instead (capped so it doesn't balloon on a
   wide screen) with taller, easier-to-tap day cells. */
.flatpickr-calendar {
    width: 100% !important;
    max-width: 24rem;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.flatpickr-days,
.dayContainer {
    width: 100% !important;
    max-width: 100% !important;
}
.flatpickr-day {
    max-width: none !important;
    height: 2.6rem;
    line-height: 2.6rem;
    color: var(--text) !important;
}
.flatpickr-months,
.flatpickr-current-month,
.flatpickr-weekdays {
    background: var(--surface) !important;
    color: var(--text) !important;
}
.flatpickr-current-month {
    left: 50%;
    display: flex;
    align-items: center;
    gap: .25rem;
    width: auto;
    padding-top: .45rem;
    font-size: .9rem;
    line-height: 1.2;
    transform: translateX(-50%);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    width: auto;
    appearance: auto;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: .15rem;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}
.flatpickr-current-month .numInputWrapper {
    width: 4.5rem;
}
.flatpickr-current-month input.cur-year {
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: .15rem 1rem .15rem .25rem;
    color: var(--text);
    font-weight: 600;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    opacity: 1;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible,
.flatpickr-current-month input.cur-year:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
.flatpickr-weekday {
    color: var(--text-muted) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--text-muted) !important;
    opacity: .35 !important;
    cursor: default !important;
}
.flatpickr-day.today {
    border-color: var(--brand) !important;
}
.flatpickr-day:hover {
    background: var(--surface-2) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--bg) !important;
}
.flatpickr-day.inRange {
    background: var(--accent-dim) !important;
    border-color: var(--accent-dim) !important;
    box-shadow: -5px 0 0 var(--accent-dim), 5px 0 0 var(--accent-dim) !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--text-muted) !important;
    fill: var(--text-muted) !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--text) !important;
    fill: var(--text) !important;
}
.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--text-muted) !important;
}
.numInputWrapper span.arrowDown:after {
    border-top-color: var(--text-muted) !important;
}