/* ============================================================
   Flatpickr calendar — themed to match design tokens
   ============================================================ */


.flatpickr-calendar {
    background: var(--wt-card);
    border: 1px solid var(--wt-sage-border);
    box-shadow: var(--wt-shadow-card);
    border-radius: 0.75rem;
    overflow: hidden;
}

.flatpickr-months {
    background: var(--wt-sage);
    border-radius: 0;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
    background: var(--wt-sage);
    color: #fff;
    fill: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #fff;
    color: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--wt-sage-pale);
    color: var(--wt-sage-pale);
}

.flatpickr-weekdays {
    background: var(--wt-sage-dark);
}

span.flatpickr-weekday {
    background: var(--wt-sage-dark);
    color: rgba(255, 255, 255, 0.80);
    font-weight: 600;
}

.flatpickr-days {
    background: var(--wt-card);
}

.flatpickr-day {
    color: var(--wt-text);
    border-radius: 0.4rem;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--wt-sage-pale);
    border-color: var(--wt-sage-pale);
    color: var(--wt-text);
}

.flatpickr-day.today {
    border-color: var(--wt-sage);
    color: var(--wt-sage);
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: var(--wt-sage-pale);
    border-color: var(--wt-sage);
    color: var(--wt-sage);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--wt-sage);
    border-color: var(--wt-sage);
    color: #fff;
}

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

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--wt-text-muted);
    opacity: 0.4;
}

/* Month <select>: native OS rendering on Windows ignores CSS vars and most
   background rules. Use hardcoded hex + color-scheme to force readable output. */
.flatpickr-monthDropdown-months {
    background: #1f5c3b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    cursor: pointer;
    color-scheme: dark;   /* tells the OS to render the native dropdown dark */
}

.flatpickr-monthDropdown-months:hover,
.flatpickr-monthDropdown-months:focus {
    background: #174d31 !important;
    outline: none;
}

.flatpickr-monthDropdown-months option {
    background: #1f5c3b !important;
    color: #fff !important;
}

[data-theme="dark"] .flatpickr-monthDropdown-months {
    background: #1f5c3b !important;
    color: #fff !important;
    color-scheme: dark;
}

[data-theme="dark"] .flatpickr-monthDropdown-months option {
    background: #1f5c3b !important;
    color: #fff !important;
}

.numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.15);
}

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Dark mode overrides */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--wt-card);
    border-color: var(--wt-sage-border);
}

[data-theme="dark"] .flatpickr-days {
    background: var(--wt-card);
}

[data-theme="dark"] .flatpickr-day {
    color: var(--wt-text);
}

[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day.prevMonthDay:hover,
[data-theme="dark"] .flatpickr-day.nextMonthDay:hover {
    background: var(--wt-sage-pale);
    border-color: var(--wt-sage-pale);
    color: var(--wt-text);
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--wt-text-muted);
}

[data-theme="dark"] .numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.08);
}