/*
 * Flatpickr Theme Overrides
 *
 * Custom styling to make Flatpickr match Metronic design system.
 * This file should be loaded after the base flatpickr.min.css
 */

/* ============================================
   Calendar Container
   ============================================ */

.flatpickr-calendar {
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid var(--border, #e5e7eb);
  font-family: inherit;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--border, #e5e7eb);
}

/* ============================================
   Dark Mode Support
   ============================================ */

.dark .flatpickr-calendar,
[data-kt-theme-mode="dark"] .flatpickr-calendar {
  background-color: var(--card, #1e1e2d);
  border-color: var(--border, #3f4254);
}

.dark .flatpickr-calendar .flatpickr-day,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-day {
  color: var(--foreground, #9899ac);
}

.dark .flatpickr-calendar .flatpickr-day:hover,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-day:hover {
  background-color: var(--muted, #212e48);
  border-color: var(--muted, #212e48);
}

.dark .flatpickr-calendar .flatpickr-day.selected,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-day.selected {
  background-color: var(--primary, #3699ff);
  border-color: var(--primary, #3699ff);
  color: #fff;
}

.dark .flatpickr-calendar .flatpickr-day.today,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-day.today {
  border-color: var(--primary, #3699ff);
}

.dark .flatpickr-calendar .flatpickr-months .flatpickr-month,
.dark .flatpickr-calendar .flatpickr-current-month,
.dark .flatpickr-calendar .flatpickr-monthDropdown-months,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-month,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-current-month,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-monthDropdown-months {
  background-color: transparent;
  color: var(--foreground, #9899ac);
}

.dark .flatpickr-calendar .flatpickr-weekday,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-weekday {
  color: var(--muted-foreground, #565674);
}

.dark .flatpickr-calendar .flatpickr-prev-month,
.dark .flatpickr-calendar .flatpickr-next-month,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-prev-month,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-next-month {
  fill: var(--foreground, #9899ac);
}

.dark .flatpickr-calendar .flatpickr-prev-month:hover,
.dark .flatpickr-calendar .flatpickr-next-month:hover,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-prev-month:hover,
[data-kt-theme-mode="dark"] .flatpickr-calendar .flatpickr-next-month:hover {
  fill: var(--primary, #3699ff);
}