/* ═══════════════════════════════════════════════════════════════
   flatpickr — Retainr design-token theme
   Overrides flatpickr.min.css so the calendar matches whatever
   ks.css theme (midnight/onyx/arctic/rose/light) is active.
   Driven entirely by CSS custom properties on :root / html.theme-*.
   ═══════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-family: var(--font-sans);
}

/* Little pointer arrow on the calendar */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowBottom::before { border: 0; }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--bg-2); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--bg-2); }

/* Month / year header */
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  color: var(--ink);
  fill: var(--ink);
}
.flatpickr-current-month input.cur-year { color: var(--ink); }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--bg-2);
  color: var(--ink);
}

/* Prev / next arrows */
.flatpickr-prev-month,
.flatpickr-next-month { fill: var(--ink-2); color: var(--ink-2); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--accent); }

/* Weekday labels */
.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday {
  background: transparent;
  color: var(--ink-3);
  font-weight: 600;
}

/* Day cells */
.flatpickr-day {
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 6px;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--hover);
  border-color: var(--line);
  color: var(--ink);
}
.flatpickr-day.today {
  border-color: var(--accent);
  color: var(--ink);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.flatpickr-day.inRange {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: transparent;
  box-shadow: none;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--ink-4);
}

/* Time picker (when enableTime is used) */
.flatpickr-time,
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: var(--bg-2);
  color: var(--ink);
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--bg-3); }

/* Numeric input arrows on year/time */
.numInputWrapper:hover { background: var(--hover); }
.numInputWrapper span { border-color: var(--line); }
.numInputWrapper span:hover { background: var(--hover); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--ink-3); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--ink-3); }