/* Flatpickr custom theme using existing ATS CSS variables */
.flatpickr-calendar {
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  font-family: inherit;
}
.flatpickr-months {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}
.flatpickr-months .flatpickr-month {
  color: var(--text-color);
}
.flatpickr-current-month input.cur-year {
  color: var(--text-color);
}
.flatpickr-weekdays {
  background: var(--card-bg);
}
span.flatpickr-weekday {
  color: var(--text-secondary);
  font-weight: 500;
}
.flatpickr-day {
  color: var(--text-color);
  background: var(--card-bg);
  border-radius: 6px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.flatpickr-day:hover {
  background: var(--bg-color);
  box-shadow: 0 0 0 2px var(--primary-color) inset;
}
.flatpickr-day.today {
  border: 1px solid var(--primary-color);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
  background: var(--primary-color);
  color: #fff;
  box-shadow: none;
}
.flatpickr-day.disabled,
.flatpickr-day.notAllowed {
  color: var(--text-secondary);
  opacity: .4;
}
.flatpickr-time {
  border-top: 1px solid var(--border-color);
}
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator {
  color: var(--text-color);
}
.flatpickr-time input:hover, .flatpickr-time input:focus {
  background: var(--bg-color);
}
.flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-color: var(--primary-color) transparent transparent transparent;
}
.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month svg {
  fill: var(--text-secondary);
  transition: fill .15s;
}
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg {
  fill: var(--primary-color);
}
/* Dark mode adjustment for shadow intensity */
[data-theme="dark"] .flatpickr-calendar,
[data-theme="purple"] .flatpickr-calendar,
[data-theme="green"] .flatpickr-calendar,
[data-theme="blue"] .flatpickr-calendar {
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}