/* =========================
   Flatpickr Input Styling
   ========================= */

/* Always black text for visible altInput */
input.flatpickr-input[readonly],
input[type="text"].flatpickr-input[readonly] {
  color: #000;
  font-weight: 500;
  background: #fff;  /* keep it like normal input */
  cursor: pointer;   /* show pointer instead of text */
}

/* Ensure hidden original input is not visible */
input.flatpickr-input[type="hidden"] {
  display: none !important;
}


/* =========================
   Flatpickr Custom Styling
   ========================= */

/* Month + Year inline */
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
}

/* Month text */
.flatpickr-current-month .cur-month {
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  pointer-events: none !important;
}

/* Year text */
.flatpickr-current-month .numInputWrapper {
  margin: 0 !important;
  pointer-events: none !important;
}
.flatpickr-current-month .numInputWrapper input.cur-year {
  border: none !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  pointer-events: none !important;
}

/* Hide arrows on year input */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}

/* Header nav buttons */
.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--primaryColor) !important;
  fill: var(--primaryColor) !important;
}

/* Month/Year container fix */
.flatpickr-months .flatpickr-month {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 40px !important;
}

/* =========================
   Flatpickr Box Style Dates
   ========================= */

/* Base day cells */
.flatpickr-day {
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px !important;
  padding: 0 !important;
  text-align: center !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: all 0.2s ease-in-out;
}

/* Selected date */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
  background: var(--primaryColor) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Today highlight */
.flatpickr-day.today {
background: var(--primaryColor);
color: var(--white); 
border: none;
}

/* Hover effect */
.flatpickr-day:hover {
background: var(--primaryColor) !important;
color: var(--white); 
  border-radius: 8px !important;
}
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled{
  background: transparent !important;
  color: #ccc !important;
  border: none !important;
  cursor: not-allowed !important;
}

/* Disabled dates */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  color: #ccc !important;
  background: transparent !important;
  border: none !important;
  cursor: not-allowed !important;
}

/* =========================
   Optional: Dark Mode
   ========================= */
@media (prefers-color-scheme: dark) {
  .flatpickr-calendar {
    background: #222 !important;
    color: #f5f5f5 !important;
  }
  .flatpickr-day.disabled {
    color: #555 !important;
  }
}