/* Flatpickr theme override: make popup look like Bootstrap theme and improve contrast */

/* Ensure popup appears over other UI */
.flatpickr-calendar.open {
  z-index: 1056; /* Above modals backdrops if needed; lower than modal (1055 backdrop, 1056 calendar) */
}

/* Card-like look */
.flatpickr-calendar {
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Header */
.flatpickr-months .flatpickr-month {
  background-color: var(--bs-primary);
  color: #fff;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month .cur-year {
  color: #fff;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff;
}

/* Weekdays */
span.flatpickr-weekday {
  color: var(--bs-secondary);
  font-weight: 600;
}

/* Days grid */
.flatpickr-day {
  border-radius: .375rem;
  color: var(--bs-body-color);
}
.flatpickr-day:hover {
  background: var(--bs-light);
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Today marker */
.flatpickr-day.today:not(.selected) {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

/* Disabled days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: var(--bs-secondary-color,#6c757d);
  background: transparent;
  opacity: .5;
}

/* Time input */
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: var(--bs-body-color);
}
.flatpickr-time .numInputWrapper:hover {
  background: var(--bs-light);
}

/* Footer / confirm button if plugins used */
.flatpickr-confirm {
  background: var(--bs-primary);
  color: #fff;
  border: 0;
}

/* Respect dark mode if CSS var hints exist */
@media (prefers-color-scheme: dark) {
  .flatpickr-calendar {
    background: var(--bs-body-bg, #1e1e2d);
    color: var(--bs-body-color, #e9ecef);
    border-color: rgba(255,255,255,0.1);
  }
  .flatpickr-day:hover {
    background: rgba(255,255,255,0.08);
  }
}