/**
 * Eagle International – Quote modal calendar (Flatpickr) styles
 * Separate file so calendar section stays maintainable and user-friendly.
 */

/* Calendar container */
.flatpickr-calendar {
  font-family: var(--font-family, inherit) !important;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.12) !important;
  border-radius: 0.5rem !important;
  border: 0.0625rem solid #e5e7eb !important;
  z-index: 1060 !important;
}

/* Header row: black background; two separate areas so month and year never overlap */
.flatpickr-months,
.flatpickr-months .flatpickr-month {
  overflow: visible !important;
}
.flatpickr-months .flatpickr-month {
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  column-gap: 1rem !important;
}
/* Month in first slot, year in last slot – middle column empty so no overlap */
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  overflow: visible !important;
  grid-column: 1 !important;
  justify-self: start !important;
}
.flatpickr-year-nav-wrap {
  grid-column: 3 !important;
  justify-self: end !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
  display: none !important;
}

/* Hide Flatpickr default arrows; we use custom ones */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: none !important;
}

/* Month: left arrow + month name + right arrow (Bootstrap-friendly spacing) */
.flatpickr-month-display {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  min-width: 4rem !important;
  text-align: center !important;
}
.flatpickr-month-prev,
.flatpickr-month-next {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0.35rem !important;
  line-height: 1 !important;
  border-radius: 0.25rem !important;
}
.flatpickr-month-prev:hover,
.flatpickr-month-next:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
.flatpickr-month-prev i,
.flatpickr-month-next i {
  font-size: 1rem !important;
}

/* Year block: left arrow + year + right arrow (sibling of .flatpickr-current-month) */
.flatpickr-year-nav-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  flex-shrink: 0 !important;
}
.flatpickr-year-display {
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  min-width: 2.5rem !important;
  text-align: center !important;
}
.flatpickr-year-prev,
.flatpickr-year-next {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0.35rem !important;
  line-height: 1 !important;
  border-radius: 0.25rem !important;
  flex-shrink: 0 !important;
}
.flatpickr-year-prev:hover,
.flatpickr-year-next:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
.flatpickr-year-prev:disabled,
.flatpickr-year-prev.flatpickr-year-prev-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.flatpickr-year-prev i,
.flatpickr-year-next i {
  font-size: 1rem !important;
}

/* Day grid */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #4a7ab0 !important;
  border-color: #4a7ab0 !important;
}
.flatpickr-day:hover {
  background: #e8eef5 !important;
  border-color: transparent !important;
  color: #1a1a2e !important;
}