/* Flatpickr CSS - Custom overrides to match Tailwind design system */

/* Custom Flatpickr styling to match Tailwind form inputs */
.flatpickr-input {
  /* Match existing Tailwind input styling */
  @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

/* Style the alt input (user-visible input) */
.flatpickr-input.form-control {
  @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

/* Hide the original input when using altInput */
.flatpickr-input[readonly] {
  display: none !important;
}

/* Error state styling */
.flatpickr-input.error {
  @apply border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500;
}

/* Flatpickr calendar styling */
.flatpickr-calendar {
  /* Ensure calendar appears above other elements */
  z-index: 9999 !important;
  
  /* Match application font family */
  font-family: inherit;
  
  /* Subtle shadow for better visibility */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  
  /* Rounded corners to match design system */
  border-radius: 0.375rem;
  
  /* Remove default border */
  border: none;
}

/* Calendar header styling */
.flatpickr-calendar .flatpickr-months {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0.375rem 0.375rem 0 0;
}

/* Month navigation arrows */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  @apply text-gray-600 hover:text-gray-900;
  fill: currentColor;
}

/* Current month/year display */
.flatpickr-calendar .flatpickr-current-month {
  @apply text-gray-900 font-medium;
}

/* Weekday headers */
.flatpickr-calendar .flatpickr-weekdays {
  background: #f9fafb;
}

.flatpickr-calendar .flatpickr-weekday {
  @apply text-gray-700 font-medium text-sm;
  background: transparent;
}

/* Calendar days */
.flatpickr-calendar .flatpickr-day {
  @apply text-gray-900 hover:bg-gray-100;
  border-radius: 0.25rem;
  border: none;
}

/* Today's date */
.flatpickr-calendar .flatpickr-day.today {
  @apply bg-blue-100 text-blue-900 border-blue-300;
  border: 1px solid;
}

/* Selected date */
.flatpickr-calendar .flatpickr-day.selected {
  @apply bg-blue-600 text-white;
  border: 1px solid #2563eb;
}

.flatpickr-calendar .flatpickr-day.selected:hover {
  @apply bg-blue-700;
}

/* Date range selection */
.flatpickr-calendar .flatpickr-day.inRange {
  @apply bg-blue-100;
  border-radius: 0;
}

.flatpickr-calendar .flatpickr-day.startRange {
  border-radius: 0.25rem 0 0 0.25rem;
}

.flatpickr-calendar .flatpickr-day.endRange {
  border-radius: 0 0.25rem 0.25rem 0;
}

/* Disabled dates */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled {
  @apply text-gray-400 bg-gray-50;
  cursor: not-allowed;
}

/* Time picker styling */
.flatpickr-calendar .flatpickr-time {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 0 0 0.375rem 0.375rem;
}

.flatpickr-calendar .flatpickr-time-separator,
.flatpickr-calendar .flatpickr-am-pm {
  @apply text-gray-700;
}

/* Time input fields */
.flatpickr-calendar .flatpickr-hour,
.flatpickr-calendar .flatpickr-minute,
.flatpickr-calendar .flatpickr-second {
  @apply text-gray-900 bg-white border border-gray-300 rounded;
}

.flatpickr-calendar .flatpickr-hour:hover,
.flatpickr-calendar .flatpickr-minute:hover,
.flatpickr-calendar .flatpickr-second:hover {
  @apply bg-gray-50;
}

/* AM/PM toggle */
.flatpickr-calendar .flatpickr-am-pm {
  @apply bg-gray-100 text-gray-700 border border-gray-300 rounded hover:bg-gray-200;
  cursor: pointer;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .flatpickr-calendar {
    /* Ensure full width on mobile */
    width: 90vw !important;
    max-width: 350px;
  }
  
  .flatpickr-calendar .flatpickr-day {
    /* Larger touch targets on mobile */
    height: 44px;
    line-height: 44px;
  }
  
  .flatpickr-calendar .flatpickr-hour,
  .flatpickr-calendar .flatpickr-minute {
    /* Larger time inputs on mobile */
    font-size: 16px;
    height: 44px;
  }
}

/* Focus styles for accessibility */
.flatpickr-calendar .flatpickr-day:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.flatpickr-calendar .flatpickr-hour:focus,
.flatpickr-calendar .flatpickr-minute:focus,
.flatpickr-calendar .flatpickr-second:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-1;
}

/* Animation for calendar appearance */
.flatpickr-calendar.open {
  animation: flatpickr-fadeIn 0.2s ease-out;
}

@keyframes flatpickr-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
  .dark .flatpickr-calendar {
    @apply bg-gray-800 border-gray-700;
  }
  
  .dark .flatpickr-calendar .flatpickr-day {
    @apply text-gray-200 hover:bg-gray-700;
  }
  
  .dark .flatpickr-calendar .flatpickr-day.selected {
    @apply bg-blue-600 text-white;
  }
}