/* Enhanced Flatpickr Date Picker Styles */

/* Main calendar container */
.flatpickr-calendar {
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-family: inherit;
}

.flatpickr-calendar.open {
  z-index: 9999;
}

/* Month navigation */
.flatpickr-months .flatpickr-month {
  background: #f9fafb;
  color: #374151;
  border-radius: 0.5rem 0.5rem 0 0;
  height: 40px;
  line-height: 1;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  background: transparent;
  color: #6b7280;
  transition: color 0.2s ease;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #071530;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #f9fafb;
  border: none;
  color: #374151;
  font-weight: 600;
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  color: #374151;
  font-weight: 600;
  border: none;
}

/* Weekdays header */
.flatpickr-weekdays {
  background: #f3f4f6;
  height: 32px;
}

.flatpickr-weekday {
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 32px;
}

/* Individual day cells */
.flatpickr-day {
  color: #374151;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  margin: 1px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.flatpickr-day:hover {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #3730a3;
  transform: scale(1.05);
}

.flatpickr-day.selected {
  background: #071530;
  border-color: #071530;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(7, 21, 48, 0.2);
}

.flatpickr-day.selected:hover {
  background: #0a1a3a;
  border-color: #0a1a3a;
}

.flatpickr-day.today {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
  font-weight: 600;
}

.flatpickr-day.today:hover {
  background: #bfdbfe;
  border-color: #60a5fa;
  transform: scale(1.05);
}

.flatpickr-day.today.selected {
  background: #071530;
  border-color: #071530;
  color: white;
}

/* Disabled/outside month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #d1d5db;
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: #f9fafb;
  color: #9ca3af;
}

/* Time picker (if enabled) */
.flatpickr-time {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 0.5rem 0.5rem;
}

.flatpickr-time input {
  background: white;
  border: 1px solid #d1d5db;
  color: #374151;
  border-radius: 0.25rem;
  font-weight: 500;
}

.flatpickr-time input:focus {
  border-color: #071530;
  box-shadow: 0 0 0 2px rgba(7, 21, 48, 0.1);
  outline: none;
}

.flatpickr-time .flatpickr-time-separator {
  color: #6b7280;
  font-weight: 600;
}

/* Animation for calendar opening */
.flatpickr-calendar.animate {
  animation: flatpickrFadeIn 0.2s ease-out;
}

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

/* Input field enhancements */
.date-picker:focus {
  border-color: #071530;
  box-shadow: 0 0 0 2px rgba(7, 21, 48, 0.1);
}

.date-picker.has-value {
  border-color: #10b981;
  background-color: #f0fdf4;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .flatpickr-calendar {
    font-size: 14px;
    width: 280px;
  }
  
  .flatpickr-day {
    height: 36px;
    line-height: 36px;
    font-size: 13px;
  }
}

/* Dark mode support (if needed later) */
@media (prefers-color-scheme: dark) {
  .flatpickr-calendar {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
  }
  
  .flatpickr-months .flatpickr-month {
    background: #374151;
    color: #f9fafb;
  }
  
  .flatpickr-weekdays {
    background: #374151;
  }
  
  .flatpickr-weekday {
    background: #374151;
    color: #d1d5db;
  }
  
  .flatpickr-day {
    color: #f9fafb;
  }
  
  .flatpickr-day:hover {
    background: #4b5563;
    color: #f9fafb;
  }
}

/* Success state for filled date inputs */
.date-picker-filled {
  border-color: #10b981 !important;
  background-color: #f0fdf4;
}

/* Error state for invalid dates */
.date-picker-error {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
}

/* Loading state */
.date-picker-loading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%236b7280' stroke-width='2'/%3E%3Cpath d='m12 6v6l4 2' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}