/**
 * School Bus Hero Flatpickr Theme
 *
 * Custom styling for Flatpickr date picker using the SBH brand palette.
 * This theme overrides the default Flatpickr styles to match our brand colors.
 *
 * Colors used:
 *   - Gold (#D6A32E)       - Primary selection, hover states
 *   - Blue (#3E5C6E)       - Today indicator
 *   - Charcoal (#303437)   - Text color
 *   - Ivory (#FAF8F4)      - Calendar background tint
 *   - Mist (#DCD8D2)       - Borders
 *   - Gray (#6A7075)       - Muted text
 */

/* Base calendar container */
.flatpickr-calendar {
  background: #ffffff;
  border: 1px solid rgba(220, 216, 210, 0.8); /* brand-mist */
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  font-family: inherit;
}

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

/* Month navigation header */
.flatpickr-months {
  background: rgba(214, 163, 46, 0.05); /* brand-gold/5 */
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem 0;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: #303437; /* brand-charcoal */
  height: 2.5rem;
}

.flatpickr-current-month {
  font-size: 1rem;
  font-weight: 600;
  color: #303437; /* brand-charcoal */
  padding: 0.5rem 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  border: none;
  font-weight: 600;
  color: #303437; /* brand-charcoal */
  -webkit-appearance: none;
  appearance: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(214, 163, 46, 0.1); /* brand-gold/10 */
  border-radius: 0.25rem;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  color: #303437; /* brand-charcoal */
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #303437; /* brand-charcoal */
  fill: #303437;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: rgba(214, 163, 46, 0.1); /* brand-gold/10 */
  color: #D6A32E; /* brand-gold */
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: currentColor;
}

/* Weekday headers */
.flatpickr-weekdays {
  background: transparent;
  padding: 0.25rem 0;
}

.flatpickr-weekday {
  color: rgba(48, 52, 55, 0.6); /* brand-charcoal/60 */
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Days container */
.flatpickr-days {
  padding: 0.25rem;
}

.dayContainer {
  padding: 0;
}

/* Individual day cells */
.flatpickr-day {
  color: #303437; /* brand-charcoal */
  border-radius: 0.375rem;
  border: 2px solid transparent;
  font-weight: 400;
  max-width: 2.5rem;
  height: 2.5rem;
  line-height: 2.25rem;
  transition: all 0.15s ease;
}

.flatpickr-day:hover {
  background: rgba(214, 163, 46, 0.1); /* brand-gold/10 */
  border-color: rgba(214, 163, 46, 0.3); /* brand-gold/30 */
}

/* Today's date */
.flatpickr-day.today {
  border-color: #3E5C6E; /* brand-blue */
  background: rgba(62, 92, 110, 0.1); /* brand-blue/10 */
}

.flatpickr-day.today:hover {
  background: rgba(62, 92, 110, 0.2); /* brand-blue/20 */
  border-color: #3E5C6E;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #D6A32E; /* brand-gold */
  border-color: #D6A32E;
  color: #ffffff;
}

/* Date range */
.flatpickr-day.inRange {
  background: rgba(214, 163, 46, 0.15); /* brand-gold/15 */
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(214, 163, 46, 0.15), 5px 0 0 rgba(214, 163, 46, 0.15);
}

/* Days from other months */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(48, 52, 55, 0.35); /* brand-charcoal/35 */
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(214, 163, 46, 0.05); /* brand-gold/5 */
  border-color: rgba(214, 163, 46, 0.2);
}

/* Disabled dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(48, 52, 55, 0.2); /* brand-charcoal/20 */
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}

/* Week numbers */
.flatpickr-weekwrapper {
  padding: 0;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0.25rem;
}

.flatpickr-weekwrapper span.flatpickr-day {
  color: rgba(48, 52, 55, 0.4); /* brand-charcoal/40 */
  font-size: 0.75rem;
}

/* Time picker */
.flatpickr-time {
  border-top: 1px solid rgba(220, 216, 210, 0.8); /* brand-mist */
  background: rgba(250, 248, 244, 0.5); /* brand-ivory/50 */
}

.flatpickr-time input {
  color: #303437; /* brand-charcoal */
  font-weight: 500;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: rgba(214, 163, 46, 0.1); /* brand-gold/10 */
}

.flatpickr-time .flatpickr-am-pm {
  color: #303437;
  font-weight: 500;
}

.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: rgba(214, 163, 46, 0.1);
}

/* Arrow for inline calendars */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #ffffff;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #ffffff;
}

/* Input styling when Flatpickr is active */
.flatpickr-input.active {
  border-color: #D6A32E; /* brand-gold */
  box-shadow: 0 0 0 3px rgba(214, 163, 46, 0.15); /* brand-gold/15 */
}

/* Alt input (human-readable format) */
.flatpickr-input[readonly] {
  cursor: pointer;
}

/* Mobile-friendly adjustments */
@media (max-width: 640px) {
  .flatpickr-calendar {
    width: 100%;
    max-width: none;
  }

  .flatpickr-day {
    max-width: none;
    height: 2.75rem;
    line-height: 2.5rem;
  }
}