/* ep-datetimepicker.css — restyles Flatpickr to match the ep-* design system */

/* Flatpickr's own base CSS makes this `display: inline-block`, which shrinks to the
   input's content width instead of stretching to fill its flex parent (e.g. .ep-field)
   the way the bare <input> did before static:true wrapped it in this element. */
.flatpickr-wrapper {
    display: block;
    width: 100%;
}

/* static:true nests the calendar inside whatever container the input lives in — inside
   a modal, that's .ep-modal_content, which has max-height + overflow-y:auto for its own
   scrolling needs. That clips/forces a scroll on the calendar itself. Let the modal's
   content overflow visibly, but only while a calendar is actually open inside it, so
   normal modal scrolling is untouched the rest of the time. */
.ep-modal_content:has(.flatpickr-calendar.open) {
    overflow: visible;
}

.flatpickr-calendar {
    font-family: "Work Sans", sans-serif;
    box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.19);
    border-radius: var(--radius-sm);
    border: 1px solid var(--purple-25, #e6dcf5);
}

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

.flatpickr-months {
    background: var(--purple);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 6px 0;
}

.flatpickr-current-month {
    color: var(--white);
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white);
    font-weight: var(--fw-semibold, 600);
}

/* Remove native OS <select> chrome from the closed dropdown — its default hover
   (rgba(0,0,0,.05)) barely shows up against the purple background either. The open
   options list's outer popup frame is native browser UI and can't be restyled, but
   browsers generally do respect per-<option> background/color, styled below. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: 1px solid var(--purple);
    border-radius: var(--radius-sm, 6px);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background-color: var(--purple-75, rgba(255, 255, 255, 0.15));
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    background-color: var(--white);
    color: var(--black, #000);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: var(--white);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--fuscia);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--fuscia);
}

.flatpickr-weekdays {
    background: var(--purple);
}

span.flatpickr-weekday {
    background: var(--purple);
    color: var(--white);
    font-weight: var(--fw-semibold, 600);
}

.flatpickr-day.today {
    border-color: var(--purple);
}

.flatpickr-day:hover {
    background: var(--purple-25, #e6dcf5);
    border-color: var(--purple-25, #e6dcf5);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--purple);
    border-color: var(--purple);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: rgba(57, 57, 57, 0.3);
}

.flatpickr-time {
    border-top: 1px solid var(--purple-25, #e6dcf5);
}

.numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--purple);
}

.numInputWrapper span.arrowDown:after {
    border-top-color: var(--purple);
}

/* Year's up/down arrows sit on the purple month header — the default purple arrow
   color above would be invisible there, so override to white for this context only. */
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--white);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--white);
}