/* Flatpickr calendar customization styles */
.flatpickr-calendar {
  border-radius: 1.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #DDDDDD !important;
  padding: 1rem !important;
  font-family: inherit !important;
  width: auto !important;
}
/* Ensure static calendar displays above fixed elements in mobile modal */
.flatpickr-calendar.static {
  z-index: 10 !important;
  position: relative !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none !important; }
.flatpickr-months { padding: 0 0.5rem; margin-bottom: 0.5rem; }
.flatpickr-months .flatpickr-month { height: 40px; }
.flatpickr-current-month { font-weight: 600; font-size: 1rem; color: #222222; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { padding: 0.5rem; border-radius: 50%; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: #F9FAFB; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #222222; }
span.flatpickr-weekday { color: #717171; font-weight: 500; font-size: 0.75rem; }
.flatpickr-day { border-radius: 50% !important; color: #222222; font-weight: 500; }
.flatpickr-day.today { border-color: #ad196e !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: #ad196e !important; border-color: #ad196e !important; color: white !important; }
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover { background: #8a1458 !important; border-color: #8a1458 !important; }
.flatpickr-day.inRange { background: #f8e5f0 !important; border-color: #f8e5f0 !important; border-radius: 0 !important; box-shadow: -5px 0 0 #f8e5f0, 5px 0 0 #f8e5f0 !important; }
.flatpickr-day.startRange { border-radius: 50% 0 0 50% !important; }
.flatpickr-day.endRange { border-radius: 0 50% 50% 0 !important; }
.flatpickr-day.startRange.endRange { border-radius: 50% !important; }
.flatpickr-day:hover { background: #F9FAFB; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #717171; opacity: 0.5; }
/* Flatpickr wraps the input in .flatpickr-wrapper (display:inline-block) when static:true.
   Since static mode is only used on mobile (see daterange_controller.js), this wrapper only
   exists on mobile. Override to block/full-width so the input placeholder is not truncated. */
.flatpickr-wrapper { display: block !important; width: 100% !important; }
/* Mobile: make calendar fluid to fit within constrained parent containers */
@media (max-width: 767px) {
  .flatpickr-calendar {
    padding: 0.5rem !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .flatpickr-current-month {
    white-space: nowrap !important;
  }
  .flatpickr-innerContainer,
  .flatpickr-rContainer,
  .flatpickr-days,
  .flatpickr-days .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}