/* Flatpickr theme matching the site form language (select2.css is the sibling
   skin): white 12px-radius panel with a hairline frame, #EBEFFF hover bar,
   #708FFF selected day. !important mirrors the CDN stylesheet, which loads
   after app.css. */

.flatpickr-calendar
{
    font-family: 'Manrope', -apple-system, sans-serif;
    line-height: 20px !important;
    border-radius: 12px !important;
    background: var(--color-bg-alt) !important;
    /* The CDN draws its frame as a shadow too: a real 1px border would shrink
       the border-box and the fixed 307.875px day grid would overflow by 2px. */
    box-shadow: 0 0 0 1px var(--color-border), 0 12px 32px 0 rgba(16, 12, 12, 0.08) !important;
    /* Clips the pointer arrow (the select2 panel has none) and keeps corner
       day hovers inside the 12px radius. */
    overflow: hidden;
}

/* Month header */
.flatpickr-months
{
    margin: 6px 0 2px;
}
.flatpickr-months .flatpickr-month
{
    color: var(--color-text) !important;
}
.flatpickr-current-month
{
    font-size: 14px !important;
    font-weight: 600 !important;
    /* Re-centers the smaller 14px text in the 34px header row (CDN pads for
       its 135% font). */
    padding: 10px 0 0 0 !important;
}
.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months
{
    font-weight: 600 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover
{
    background: var(--color-bg-third) !important;
}

/* Prev/next arrows: muted, darken on hover. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month
{
    color: var(--color-text-link) !important;
    fill: var(--color-text-link) !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover
{
    color: var(--color-text) !important;
    fill: var(--color-text) !important;
}
/* The CDN paints hovered arrows red (#f64747) with a direct svg rule that
   beats fill inheritance. No red in the site palette. */
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg
{
    fill: var(--color-text) !important;
}

.flatpickr-weekdays
{
    height: 24px;
}
span.flatpickr-weekday
{
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-text-link) !important;
}

/* Days. Own rules below are also !important, so among them the usual cascade
   decides: hover < today < outside-month < disabled < selected. */
.flatpickr-day
{
    font-size: 14px;
    color: var(--color-text) !important;
    border-radius: 8px !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus
{
    background: var(--color-bg-third) !important;
    border-color: transparent !important;
}
.flatpickr-day.today,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus
{
    border-color: var(--color-bg-fourth) !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay
{
    color: var(--color-text-link) !important;
}
/* background needs !important only against our own hover rule above. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover
{
    color: var(--color-text-link) !important;
    background: transparent !important;
    border-color: transparent !important;
    opacity: 0.5;
    cursor: not-allowed;
}
/* Last so a selected today keeps the filled look. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus
{
    background: var(--color-bg-fourth) !important;
    border-color: var(--color-bg-fourth) !important;
    color: var(--color-text-secondary) !important;
}