/* np-datepicker.css — the shared date / time picker (np-datepicker.js), re-skinned
   from flatpickr's own theme onto the product's tokens so it reads as part of the
   product in light AND dark mode, in the product's font, with no hard-coded
   colour of its own. Loaded after ~/lib/flatpickr/flatpickr.min.css. */

/* The pop-up. */
.flatpickr-calendar.np-datepicker__pop {
    font-family: inherit;
    font-size: var(--np-fs-small);
    background: var(--np-color-surface);
    color: var(--np-color-text-primary);
    border: 1px solid var(--np-color-border);
    border-radius: var(--np-radius-2);
    box-shadow: var(--np-shadow-2);
}

.flatpickr-calendar.np-datepicker__pop.arrowTop::before,
.flatpickr-calendar.np-datepicker__pop.arrowBottom::before { border-bottom-color: var(--np-color-border); }
.flatpickr-calendar.np-datepicker__pop.arrowTop::after { border-bottom-color: var(--np-color-surface); }
.flatpickr-calendar.np-datepicker__pop.arrowBottom::after { border-top-color: var(--np-color-surface); }

/* Month bar, weekday row. */
.np-datepicker__pop .flatpickr-months .flatpickr-month,
.np-datepicker__pop .flatpickr-current-month .flatpickr-monthDropdown-months,
.np-datepicker__pop .flatpickr-current-month input.cur-year,
.np-datepicker__pop span.flatpickr-weekday {
    color: var(--np-color-text-primary);
    fill: var(--np-color-text-primary);
    background: transparent;
    font-family: inherit;
    font-weight: 400;
}

.np-datepicker__pop .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--np-color-surface);
    color: var(--np-color-text-primary);
}

.np-datepicker__pop .flatpickr-months .flatpickr-prev-month,
.np-datepicker__pop .flatpickr-months .flatpickr-next-month {
    color: var(--np-color-brand-primary);
    fill: var(--np-color-brand-primary);
}

.np-datepicker__pop .flatpickr-months .flatpickr-prev-month:hover svg,
.np-datepicker__pop .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--np-color-brand-primary-hover); }

.np-datepicker__pop span.flatpickr-weekday { color: var(--np-color-text-muted); }

/* Days. */
.np-datepicker__pop .flatpickr-day {
    color: var(--np-color-text-primary);
    border-radius: var(--np-radius-2);
}

.np-datepicker__pop .flatpickr-day:hover,
.np-datepicker__pop .flatpickr-day:focus {
    background: var(--np-color-surface-tinted);
    border-color: var(--np-color-surface-tinted);
}

.np-datepicker__pop .flatpickr-day.today { border-color: var(--np-color-brand-primary); }

/* Today, hovered or focused. flatpickr's own theme turns today's number WHITE on
   hover (it pairs that with a dark grey fill); the hover rule above replaces the
   fill with a pale tint but left the white text, which was unreadable on it.
   The number takes the brand colour instead and the cell keeps its brand ring.
   Not when today is also the SELECTED day — that cell is a filled brand block
   and its white text is correct. */
.np-datepicker__pop .flatpickr-day.today:not(.selected):hover,
.np-datepicker__pop .flatpickr-day.today:not(.selected):focus {
    color: var(--np-color-brand-primary);
    border-color: var(--np-color-brand-primary);
}

.np-datepicker__pop .flatpickr-day.selected,
.np-datepicker__pop .flatpickr-day.selected:hover,
.np-datepicker__pop .flatpickr-day.selected:focus {
    background: var(--np-color-brand-primary);
    border-color: var(--np-color-brand-primary);
    color: #FFFFFF;
}

.np-datepicker__pop .flatpickr-day.prevMonthDay,
.np-datepicker__pop .flatpickr-day.nextMonthDay { color: var(--np-color-text-muted); }

/* Outside min / max (e.g. a past date on a booking): struck through as well as
   faded, so the state is not colour alone. */
.np-datepicker__pop .flatpickr-day.flatpickr-disabled,
.np-datepicker__pop .flatpickr-day.flatpickr-disabled:hover {
    color: var(--np-color-text-muted);
    opacity: 0.55;
    text-decoration: line-through;
}

/* Keyboard focus is always visible (§3.11). */
.np-datepicker__pop .flatpickr-day:focus-visible,
.np-datepicker__pop .flatpickr-time input:focus-visible,
.np-datepicker__pop .flatpickr-monthDropdown-months:focus-visible {
    outline: 2px solid var(--np-color-brand-primary);
    outline-offset: 1px;
}

/* Time row. */
.np-datepicker__pop .flatpickr-time { border-top-color: var(--np-color-border); }

.np-datepicker__pop .flatpickr-time input,
.np-datepicker__pop .flatpickr-time .flatpickr-time-separator {
    color: var(--np-color-text-primary);
    font-family: inherit;
    font-weight: 400;
}

.np-datepicker__pop .flatpickr-time input:hover,
.np-datepicker__pop .flatpickr-time input:focus { background: var(--np-color-surface-tinted); }

.np-datepicker__pop .numInputWrapper span.arrowUp::after { border-bottom-color: var(--np-color-text-muted); }
.np-datepicker__pop .numInputWrapper span.arrowDown::after { border-top-color: var(--np-color-text-muted); }

/* The visible field keeps the product's input look (flatpickr copies the
   original's np-input class across); the pointer says it opens a picker. */
input.np-datepicker__alt,
input.np-datepicker[type="text"] {
    cursor: pointer;
}