/* Flatpickr Theme Integration for Atlas */
/* Maps Flatpickr selectors to Atlas CSS variables for seamless theme integration */

/*
 * Note on !important usage:
 * Flatpickr applies inline styles and uses high-specificity selectors in its base CSS.
 * !important is required here to override these styles and enable theme integration.
 * This is a necessary trade-off for proper theming support.
 */

/* ===== Calendar Container ===== */
.flatpickr-calendar {
  background: rgb(var(--color-bg-card) / 1) !important;
  border: 1px solid rgb(var(--color-border) / 1) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0.5rem !important;
  font-family: inherit !important;
}

.flatpickr-calendar.open {
  z-index: 10001 !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  border-bottom-color: rgb(var(--color-bg-card) / 1) !important;
}

/* ===== Month Navigation ===== */
.flatpickr-months {
  background: rgb(var(--color-bg-card) / 1) !important;
  border-bottom: 1px solid rgb(var(--color-border) / 1) !important;
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}

.flatpickr-month {
  background: transparent !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  fill: rgb(var(--color-text-primary) / 1) !important;
}

.flatpickr-current-month {
  color: rgb(var(--color-text-primary) / 1) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper input {
  background: rgb(var(--color-bg-card) / 1) !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  border: 1px solid rgb(var(--color-border) / 1) !important;
  border-radius: 0.25rem !important;
  font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper input:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .numInputWrapper input:focus {
  outline: none !important;
  border-color: rgb(var(--color-focus-ring) / 1) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-focus-ring), 0.2) !important;
}

/* Year input arrows */
.flatpickr-current-month .numInputWrapper span {
  border-color: rgb(var(--color-text-muted) / 1) !important;
}

.flatpickr-current-month .numInputWrapper span:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgb(var(--color-text-primary) / 1) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: rgb(var(--color-text-primary) / 1) !important;
}

/* ===== Navigation Arrows ===== */
.flatpickr-prev-month,
.flatpickr-next-month {
  fill: rgb(var(--color-text-secondary) / 1) !important;
  transition: fill 200ms ease-in-out;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  fill: rgb(var(--color-primary) / 1) !important;
  background: rgb(var(--color-bg-hover) / 1) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: inherit !important;
}

/* ===== Weekday Headers ===== */
.flatpickr-weekdays {
  background: rgb(var(--color-bg-card) / 1) !important;
  border-bottom: 1px solid rgb(var(--color-border-light) / 1) !important;
}

span.flatpickr-weekday {
  background: rgb(var(--color-bg-card) / 1) !important;
  color: rgb(var(--color-text-secondary) / 1) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ===== Days Container ===== */
.flatpickr-days {
  background: rgb(var(--color-bg-card) / 1) !important;
}

.dayContainer {
  background: rgb(var(--color-bg-card) / 1) !important;
}

/* ===== Individual Day Cells ===== */
.flatpickr-day {
  color: rgb(var(--color-text-primary) / 1) !important;
  border: none !important;
  border-radius: 0.375rem !important;
  transition: all 150ms ease-in-out;
}

.flatpickr-day:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
  border-color: transparent !important;
  color: rgb(var(--color-text-primary) / 1) !important;
}

/* Today's date */
.flatpickr-day.today {
  border: 2px solid rgb(var(--color-primary) / 1) !important;
  background: transparent !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  font-weight: 600 !important;
}

.flatpickr-day.today:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
  border-color: rgb(var(--color-primary) / 1) !important;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
  background: rgb(var(--color-primary) / 1) !important;
  color: white !important;
  border-color: rgb(var(--color-primary) / 1) !important;
  font-weight: 600 !important;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 rgb(var(--color-primary) / 1) !important;
}

/* Date range */
.flatpickr-day.inRange {
  background: rgba(var(--color-primary), 0.1) !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  border-color: transparent !important;
  box-shadow: -5px 0 0 rgba(var(--color-primary), 0.1), 5px 0 0 rgba(var(--color-primary), 0.1) !important;
}

.flatpickr-day.inRange:hover {
  background: rgba(var(--color-primary), 0.15) !important;
}

/* Disabled and out-of-range dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed:hover {
  color: rgb(var(--color-text-disabled) / 1) !important;
  background: transparent !important;
  cursor: not-allowed;
}

/* Previous/next month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgb(var(--color-text-muted) / 1) !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  color: rgb(var(--color-text-secondary) / 1) !important;
  background: rgb(var(--color-bg-hover) / 1) !important;
}

/* Hidden days (when disabled) */
.flatpickr-day.hidden {
  visibility: hidden !important;
}

/* ===== Time Picker ===== */
.flatpickr-time {
  background: rgb(var(--color-bg-card) / 1) !important;
  border-top: 1px solid rgb(var(--color-border) / 1) !important;
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.flatpickr-time::after {
  display: none !important;
}

/* Time input fields */
.flatpickr-time input {
  background: rgb(var(--color-bg-card) / 1) !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  border: 1px solid rgb(var(--color-border) / 1) !important;
  border-radius: 0.25rem !important;
  font-weight: 600 !important;
  transition: all 150ms ease-in-out;
}

.flatpickr-time input:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
}

.flatpickr-time input:focus {
  outline: none !important;
  border-color: rgb(var(--color-focus-ring) / 1) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-focus-ring), 0.2) !important;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
  font-size: 1rem !important;
}

/* Time separator */
.flatpickr-time-separator {
  color: rgb(var(--color-text-secondary) / 1) !important;
  font-weight: 600 !important;
}

/* AM/PM selector */
.flatpickr-am-pm {
  background: rgb(var(--color-bg-card) / 1) !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  border: 1px solid rgb(var(--color-border) / 1) !important;
  border-radius: 0.25rem !important;
  font-weight: 600 !important;
  transition: all 150ms ease-in-out;
  cursor: pointer;
}

.flatpickr-am-pm:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
}

.flatpickr-am-pm:focus {
  outline: none !important;
  border-color: rgb(var(--color-focus-ring) / 1) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-focus-ring), 0.2) !important;
}

/* Time increment/decrement arrows */
.flatpickr-time .numInputWrapper span {
  border-color: rgb(var(--color-border) / 1) !important;
  transition: background-color 150ms ease-in-out;
}

.flatpickr-time .numInputWrapper span:hover {
  background: rgb(var(--color-bg-hover) / 1) !important;
}

.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgb(var(--color-text-primary) / 1) !important;
}

.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-top-color: rgb(var(--color-text-primary) / 1) !important;
}

/* ===== Input Field (Alt Input) ===== */
.flatpickr-input[readonly] {
  cursor: pointer;
}

input.flatpickr-input {
  background-color: rgb(var(--color-bg-card) / 1) !important;
  color: rgb(var(--color-text-primary) / 1) !important;
  border: 1px solid rgb(var(--color-border) / 1) !important;
}

input.flatpickr-input:hover {
  border-color: rgb(var(--color-border-dark) / 1) !important;
}

input.flatpickr-input:focus {
  border-color: rgb(var(--color-focus-ring) / 1) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-focus-ring), 0.2) !important;
}

/* Alt input (user-friendly display input) */
input.flatpickr-input.flatpickr-mobile {
  background-color: rgb(var(--color-bg-card) / 1) !important;
  color: rgb(var(--color-text-primary) / 1) !important;
}

/* ===== Clear Button ===== */
.flatpickr-clear {
  color: rgb(var(--color-error-text) / 1) !important;
  cursor: pointer;
  transition: opacity 150ms ease-in-out;
}

.flatpickr-clear:hover {
  opacity: 0.7;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .flatpickr-calendar {
    font-size: 14px !important;
  }

  .flatpickr-day {
    max-width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
  }

  .flatpickr-time input {
    font-size: 0.875rem !important;
  }
}

/* ===== Animation ===== */
.flatpickr-calendar.inline {
  opacity: 1;
}

.flatpickr-calendar.open {
  opacity: 1;
}

.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ===== Accessibility Improvements ===== */
.flatpickr-day:focus,
.flatpickr-prev-month:focus,
.flatpickr-next-month:focus {
  outline: 2px solid rgb(var(--color-focus-ring) / 1) !important;
  outline-offset: 2px !important;
}

/* ===== Week Numbers (if enabled) ===== */
.flatpickr-weekwrapper {
  background: rgb(var(--color-bg-secondary) / 1) !important;
  border-right: 1px solid rgb(var(--color-border) / 1) !important;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  box-shadow: none !important;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  background: rgb(var(--color-bg-secondary) / 1) !important;
  color: rgb(var(--color-text-secondary) / 1) !important;
}

span.flatpickr-weekday {
  background: transparent !important;
}

.flatpickr-weekwrapper span.flatpickr-day {
  color: rgb(var(--color-text-secondary) / 1) !important;
  background: transparent !important;
  cursor: default !important;
}

.flatpickr-weekwrapper span.flatpickr-day:hover {
  background: transparent !important;
  color: rgb(var(--color-text-secondary) / 1) !important;
}

/* ===== Dark Mode Specific Adjustments ===== */
[data-theme="dark"] .flatpickr-calendar {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
  fill: rgb(var(--color-primary) / 1) !important;
}

/* ===== Auto Mode (System Preference) ===== */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .flatpickr-calendar {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
  }

  [data-theme="auto"] .flatpickr-months .flatpickr-prev-month:hover svg,
  [data-theme="auto"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: rgb(var(--color-primary) / 1) !important;
  }
}