/**
 * WebWorks Forms: theme for the flatpickr date, month and time pickers.
 *
 * Colours, radii and type come from custom properties, so each site sets them once in its
 * theme LESS (see the package docs for the mapping block). The fallbacks are UIkit defaults.
 *
 *   --wwf-surface        popover background
 *   --wwf-border         popover border and time divider
 *   --wwf-border-strong  "today" outline, number-spinner hover
 *   --wwf-hover          hover/focus background for days, months, buttons
 *   --wwf-focus          keyboard focus ring
 *   --wwf-selected       selected day/month background
 *   --wwf-selected-text  selected day/month text
 *   --wwf-text           main text
 *   --wwf-muted          secondary text (weekdays, arrows, other-month days)
 *   --wwf-radius         small radius (days, buttons)
 *   --wwf-radius-lg      popover radius
 *   --wwf-shadow         popover shadow
 *   --wwf-font           font family
 *   --wwf-font-size      font size
 *
 * Rules are scoped under html so they beat flatpickr's own CSS whatever the load order.
 */

/* Popover shell */
html .flatpickr-calendar {
    box-sizing: content-box;
    padding: 8px;
    background: var(--wwf-surface, #fff);
    border: 1px solid var(--wwf-border, #e5e5e5);
    border-radius: var(--wwf-radius-lg, 8px);
    box-shadow: var(--wwf-shadow, 0 5px 12px rgba(0, 0, 0, 0.15));
    font-family: var(--wwf-font, inherit);
    font-size: var(--wwf-font-size, 0.875rem);
    color: var(--wwf-text, #333);
}

/* No pointer triangle */
html .flatpickr-calendar::before,
html .flatpickr-calendar::after {
    display: none;
}

html .flatpickr-calendar.open {
    margin-top: 4px;
}

/* The grid clips outlines, so focus uses backgrounds and inset shadows instead. */
html .flatpickr-calendar *:focus,
html .flatpickr-calendar *:focus-visible {
    outline: none !important;
}

/* Number inputs: year, hour, minute */
html .flatpickr-current-month .numInputWrapper,
html .flatpickr-time .numInputWrapper {
    border-radius: var(--wwf-radius, 4px);
}

html .flatpickr-current-month .numInputWrapper:hover,
html .flatpickr-current-month .numInputWrapper:focus-within,
html .flatpickr-time .numInputWrapper:hover,
html .flatpickr-time .numInputWrapper:focus-within {
    background: var(--wwf-hover, #f8f8f8);
}

html .numInputWrapper span {
    border-color: transparent;
}

html .numInputWrapper span:hover {
    background: var(--wwf-border-strong, #d5d5d5);
}

html .numInputWrapper span.arrowUp::after {
    border-bottom-color: var(--wwf-muted, #999);
}

html .numInputWrapper span.arrowDown::after {
    border-top-color: var(--wwf-muted, #999);
}

/* Month header */
html .flatpickr-months {
    /* Positions prev/next inside the calendar padding */
    position: relative;
    margin-bottom: 4px;
}

html .flatpickr-months .flatpickr-month {
    height: 40px;
    color: var(--wwf-text, #333);
    fill: var(--wwf-text, #333);
}

html .flatpickr-months .flatpickr-prev-month,
html .flatpickr-months .flatpickr-next-month {
    top: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wwf-radius, 4px);
    color: var(--wwf-muted, #999);
    fill: var(--wwf-muted, #999);
    transition: background-color 0.15s ease;
}

html .flatpickr-months .flatpickr-prev-month svg,
html .flatpickr-months .flatpickr-next-month svg {
    fill: var(--wwf-muted, #999);
}

/* flatpickr's default hover is red */
html .flatpickr-months .flatpickr-prev-month:hover,
html .flatpickr-months .flatpickr-next-month:hover {
    background: var(--wwf-hover, #f8f8f8);
}

html .flatpickr-months .flatpickr-prev-month:hover svg,
html .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--wwf-text, #333);
}

html .flatpickr-current-month {
    padding-top: 10px;
    font-size: var(--wwf-font-size, 0.875rem);
    font-weight: 600;
}

html .flatpickr-current-month span.cur-month {
    font-weight: 600;
    margin-left: 0;
}

html .flatpickr-current-month span.cur-month:hover {
    background: none;
}

html .flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: var(--wwf-text, #333);
}

/* flatpickr disables the year when min and max share it, and greys it with a fixed black. */
html .flatpickr-current-month input.cur-year[disabled],
html .flatpickr-current-month input.cur-year[disabled]:hover {
    color: var(--wwf-text, #333);
    background: transparent;
}

html .flatpickr-current-month .numInputWrapper:has(input[disabled]):hover {
    background: transparent;
}

/* Weekday row */
html .flatpickr-weekdays {
    height: 32px;
}

html span.flatpickr-weekday {
    background: transparent;
    color: var(--wwf-muted, #999);
    font-size: 12px;
    font-weight: 500;
}

/* Day grid and month grid share their states */
html .flatpickr-day,
html .flatpickr-calendar .flatpickr-monthSelect-month {
    border-radius: var(--wwf-radius, 4px);
    color: var(--wwf-text, #333);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html .flatpickr-day:hover,
html .flatpickr-day:focus,
html .flatpickr-calendar .flatpickr-monthSelect-month:hover,
html .flatpickr-calendar .flatpickr-monthSelect-month:focus {
    background: var(--wwf-hover, #f8f8f8);
    border-color: transparent;
    color: var(--wwf-text, #333);
}

/* Inset ring stays inside the cell so nothing clips */
html .flatpickr-day:focus-visible,
html .flatpickr-calendar .flatpickr-monthSelect-month:focus-visible {
    box-shadow: inset 0 0 0 2px var(--wwf-focus, #1e87f0);
}

html .flatpickr-day.today,
html .flatpickr-calendar .flatpickr-monthSelect-month.today {
    border-color: var(--wwf-border-strong, #d5d5d5);
}

html .flatpickr-day.today:hover,
html .flatpickr-day.today:focus {
    background: var(--wwf-hover, #f8f8f8);
    border-color: var(--wwf-border-strong, #d5d5d5);
    color: var(--wwf-text, #333);
}

html .flatpickr-day.selected,
html .flatpickr-day.selected:hover,
html .flatpickr-day.selected:focus,
html .flatpickr-day.startRange,
html .flatpickr-day.endRange,
html .flatpickr-calendar .flatpickr-monthSelect-month.selected,
html .flatpickr-calendar .flatpickr-monthSelect-month.selected:hover,
html .flatpickr-calendar .flatpickr-monthSelect-month.selected:focus,
html .flatpickr-calendar .flatpickr-monthSelect-month.startRange,
html .flatpickr-calendar .flatpickr-monthSelect-month.endRange {
    background: var(--wwf-selected, #1e87f0);
    border-color: var(--wwf-selected, #1e87f0);
    color: var(--wwf-selected-text, #fff);
}

/* Keeps the ring visible against the selected colour */
html .flatpickr-day.selected:focus-visible,
html .flatpickr-calendar .flatpickr-monthSelect-month.selected:focus-visible {
    box-shadow: inset 0 0 0 2px var(--wwf-focus, #1e87f0), inset 0 0 0 4px var(--wwf-surface, #fff);
}

html .flatpickr-day.inRange {
    background: var(--wwf-hover, #f8f8f8);
    border-color: var(--wwf-hover, #f8f8f8);
    box-shadow: -5px 0 0 var(--wwf-hover, #f8f8f8), 5px 0 0 var(--wwf-hover, #f8f8f8);
}

/* Days from the previous and next months (flatpickr styles their hovers separately) */
html .flatpickr-day.prevMonthDay,
html .flatpickr-day.nextMonthDay {
    color: color-mix(in srgb, var(--wwf-muted, #999) 50%, transparent);
}

html .flatpickr-day.prevMonthDay:hover,
html .flatpickr-day.prevMonthDay:focus,
html .flatpickr-day.nextMonthDay:hover,
html .flatpickr-day.nextMonthDay:focus {
    background: var(--wwf-hover, #f8f8f8);
    border-color: transparent;
    color: var(--wwf-muted, #999);
}

html .flatpickr-day.flatpickr-disabled,
html .flatpickr-day.flatpickr-disabled:hover,
html .flatpickr-calendar .flatpickr-monthSelect-month.flatpickr-disabled,
html .flatpickr-calendar .flatpickr-monthSelect-month.flatpickr-disabled:hover {
    color: color-mix(in srgb, var(--wwf-muted, #999) 35%, transparent);
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
}

/* Month picker layout (monthSelect plugin) */
html .flatpickr-monthSelect-months {
    margin: 4px 0 0;
}

html .flatpickr-calendar .flatpickr-monthSelect-month {
    box-sizing: border-box;
    width: calc(100% / 3);
    margin: 0;
    padding: 10px 0;
    border: 1px solid transparent;
    background: none;
}

/* Time picker */
html .flatpickr-time {
    height: 40px;
    max-height: 40px;
    line-height: 40px;
}

html .flatpickr-time input {
    color: var(--wwf-text, #333);
    font-size: var(--wwf-font-size, 0.875rem);
    font-variant-numeric: tabular-nums;
    border-radius: var(--wwf-radius, 4px);
    background: transparent;
}

html .flatpickr-time input.flatpickr-hour {
    font-weight: 600;
}

html .flatpickr-time input:hover,
html .flatpickr-time input:focus {
    background: var(--wwf-hover, #f8f8f8);
}

html .flatpickr-time .flatpickr-time-separator {
    color: var(--wwf-muted, #999);
}

html .flatpickr-time .flatpickr-am-pm {
    color: var(--wwf-text, #333);
    border-radius: var(--wwf-radius, 4px);
}

html .flatpickr-time .flatpickr-am-pm:hover,
html .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--wwf-hover, #f8f8f8);
}

/* Divider only when the time sits under a calendar */
html .flatpickr-calendar.hasTime .flatpickr-time {
    border-top: 1px solid var(--wwf-border, #e5e5e5);
}

html .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    border-top: none;
}