.flatpickr-calendar {
    background-color: var(--bg-color);
}

.flatpickr-day {
    color: var(--text-color);
}
.flatpickr-current-month {
    color: var(--text-color);
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
    stroke: var(--text-color);
}
.flatpickr-month .flatpickr-months {
    color: rgba(225, 225, 225, 225);
    fill: rgba(225, 225, 225, 225);
}

/* Make the year field read as directly editable, not static text */
.numInputWrapper {
    border-radius: 4px;
    transition: background-color 0.15s ease;
}
.numInputWrapper input.cur-year {
    font-weight: inherit;
}
.numInputWrapper:hover,
.numInputWrapper input.cur-year:focus {
    background-color: var(--bg-muted);
}
.numInputWrapper .arrowUp,
.numInputWrapper .arrowDown {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.numInputWrapper:hover .arrowUp,
.numInputWrapper:hover .arrowDown {
    opacity: 1;
}
span.flatpickr-weekday {
    color: var(--text-color);
}

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

/* CUSTOM DAYS */
.flatpickr-day.clocked-day::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--success-color);
    border-radius: 50%;
}
.flatpickr-day.red-day, .flatpickr-day.red-day:hover {
    color: var(--danger-color);
}
.flatpickr-day.selected {
    color: var(--bg-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.flatpickr-day:hover, .flatpickr-day.today:hover {
    background-color: var(--bg-muted);
    color: var(--text-color);
    border-color: var(--text-color);
}

/* Today's ring is drawn as a pseudo-element rather than the cell's own border,
   so it stays a circle whatever the cell's border-radius does — inside a week
   band the cells are square, and a border-drawn ring squares off with them.
   currentColor keeps it legible on every background the cell can take: the
   plain calendar, a hovered week's band, and a selected week's primary fill. */
.flatpickr-day.today {
    border-color: transparent;
}

.flatpickr-day.today::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: var(--border-thin) solid currentColor;
    border-radius: 50%;
    pointer-events: none;
}

/* A clocked day's dot sits on --primary-color once its day is picked, so it
   switches to the same foreground the day's number uses. */
.flatpickr-day.selected.clocked-day::after {
    background-color: var(--bg-color);
}

/* ─── WEEK SELECT ────────────────────────────────────────────────────────── */
/*
 * The weekSelect plugin marks all seven days of a row rather than one day, so a
 * week has to read as a single band. flatpickr draws that band by bridging the
 * 5px gaps between day cells with a box-shadow, and hardcodes both the fill and
 * the bridge to its own blue — which is why an unstyled selected week shows
 * --primary-color squares sitting on a lighter blue strip. Fill and bridge are
 * the same token here, so the row is one continuous colour.
 *
 * A picked week is --primary-color, the same fill a picked day gets in a
 * single-day picker; a hovered week is --bg-muted, the same fill a hovered day
 * gets. Only the shape differs between the two pickers, not the palette.
 */
.flatpickr-calendar.tt-flatpickr-week {
    --_week-band: var(--primary-color);
    --_week-band-hover: var(--bg-muted);
    --_week-end-radius: 4px;
}

/* Hovered week — the band is the affordance, so no separate square follows the
   cursor along the row. The plugin puts .inRange on all seven days while :hover
   lands on one of them, so both carry the identical treatment. The band leaves
   the day colours alone: --bg-muted is light enough that a red day, a muted
   neighbouring-month day and an ordinary one all still read as themselves. */
.tt-flatpickr-week .flatpickr-day:hover,
.tt-flatpickr-week .flatpickr-day.inRange,
.tt-flatpickr-week .flatpickr-day.inRange:hover {
    background-color: var(--_week-band-hover);
    border-color: var(--_week-band-hover);
    box-shadow: -5px 0 0 var(--_week-band-hover), 5px 0 0 var(--_week-band-hover);
    border-radius: 0;
}

/* Selected week */
.tt-flatpickr-week .flatpickr-day.week.selected,
.tt-flatpickr-week .flatpickr-day.week.selected:hover,
.tt-flatpickr-week .flatpickr-day.week.selected.inRange {
    background-color: var(--_week-band);
    border-color: var(--_week-band);
    box-shadow: -5px 0 0 var(--_week-band), 5px 0 0 var(--_week-band);
    border-radius: 0;
    color: var(--bg-color);
}

/* Round the ends of the band and stop the bridge spilling past them. Every day
   sits as a direct child of .dayContainer, so Monday is 7n+1 and Sunday 7n. */
.tt-flatpickr-week .flatpickr-day:nth-child(7n + 1):hover,
.tt-flatpickr-week .flatpickr-day.inRange:nth-child(7n + 1) {
    border-radius: var(--_week-end-radius) 0 0 var(--_week-end-radius);
    box-shadow: 5px 0 0 var(--_week-band-hover);
}
.tt-flatpickr-week .flatpickr-day:nth-child(7n):hover,
.tt-flatpickr-week .flatpickr-day.inRange:nth-child(7n) {
    border-radius: 0 var(--_week-end-radius) var(--_week-end-radius) 0;
    box-shadow: -5px 0 0 var(--_week-band-hover);
}
.tt-flatpickr-week .flatpickr-day.week.selected:nth-child(7n + 1),
.tt-flatpickr-week .flatpickr-day.week.selected.inRange:nth-child(7n + 1) {
    border-radius: var(--_week-end-radius) 0 0 var(--_week-end-radius);
    box-shadow: 5px 0 0 var(--_week-band);
}
.tt-flatpickr-week .flatpickr-day.week.selected:nth-child(7n),
.tt-flatpickr-week .flatpickr-day.week.selected.inRange:nth-child(7n) {
    border-radius: 0 var(--_week-end-radius) var(--_week-end-radius) 0;
    box-shadow: -5px 0 0 var(--_week-band);
}

/* A neighbouring month's day stays de-emphasised on the primary band — the
   month boundary is worth seeing even inside a picked week. */
.tt-flatpickr-week :is(.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay).week.selected {
    color: color-mix(in srgb, var(--bg-color) 60%, var(--primary-color));
}

/* A red day keeps --danger-color as-is on the hover band, which is light enough
   to carry it. The primary band is not — see the block at the end of the file. */
.tt-flatpickr-week .flatpickr-day.red-day:is(:hover, .inRange):not(.selected) {
    color: var(--danger-color);
}

/* The clocked-day dot follows the day's number onto the primary band. */
.tt-flatpickr-week .flatpickr-day.week.selected.clocked-day::after {
    background-color: var(--bg-color);
}

/* ─── RED DAY ON A FILLED CELL ───────────────────────────────────────────── */
/*
 * A red day is marked by colouring its number --danger-color, and it has to stay
 * marked once the cell is filled with --primary-color — which day is a public
 * holiday is exactly what a picked week has to keep showing. Flat --danger-color
 * can't do it there: dark red on deep blue sits at 1.7:1, and on the dark
 * theme's orange it is no better.
 *
 * So the number is mixed towards --bg-color, which is the foreground the rest of
 * the filled cell already uses — white in the light theme, near-black in the
 * dark one. The result stays in the red family while reading against the fill in
 * both themes, and it needs no per-theme value of its own.
 */
.flatpickr-day.selected.red-day,
.flatpickr-day.selected.red-day:hover,
.tt-flatpickr-week .flatpickr-day.week.selected.red-day,
.tt-flatpickr-week .flatpickr-day.week.selected.red-day:hover {
    color: color-mix(in srgb, var(--danger-color) 45%, var(--bg-color));
}