/* Easepick Datepicker Custom Styles */

/* Ensure datepicker appears above all other elements including headers */
.easepick-wrapper {
  z-index: 2147483647 !important;
  position: relative;
}

.easepick {
  z-index: 2147483647 !important;
  position: fixed !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: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
}

/* Fix container positioning */
.easepick .container {
  z-index: 2147483647 !important;
  position: relative;
}

/* Ensure header is visible */
.easepick .header {
  z-index: 2147483647 !important;
  position: relative;
  background: white !important;
}

/* Ensure calendar grid is visible */
.easepick .calendar {
  z-index: 2147483647 !important;
  position: relative;
  background: white !important;
}

/* Ensure buttons are clickable */
.easepick button {
  z-index: 2147483647 !important;
  position: relative;
}

/* Make sure days are clickable */
.easepick .day {
  z-index: 2147483647 !important;
  position: relative;
}

/* Override any potential conflicting styles from page header or navigation */
body .easepick {
  z-index: 2147483647 !important;
}

html .easepick {
  z-index: 2147483647 !important;
}

/* Custom styling to match the form design */
.easepick {
  background: white !important;
  font-family: inherit !important;
  color: #374151 !important;
}

.easepick .header {
  padding: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
}

.easepick .header .month {
  color: #1f2937 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.easepick .header .year {
  color: #6b7280 !important;
  font-size: 0.875rem !important;
}

.easepick .header button {
  color: #6b7280 !important;
  border-radius: 6px !important;
  padding: 8px !important;
  transition: all 0.2s ease !important;
}

.easepick .header button:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

.easepick .calendar {
  padding: 16px !important;
}

.easepick .weekdays {
  margin-bottom: 8px !important;
}

.easepick .weekday {
  color: #6b7280 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.easepick .day {
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  color: #374151 !important;
  font-weight: 500 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1px !important;
}

.easepick .day:hover {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}

.easepick .day.selected {
  background-color: rgb(79 70 229) !important;
  /* primary-600 */
  color: white !important;
  font-weight: 600 !important;
}

.easepick .day.selected:hover {
  background-color: rgb(67 56 202) !important;
  /* primary-700 */
}

.easepick .day.today {
  background-color: rgb(238 242 255) !important;
  /* primary-50 */
  color: rgb(79 70 229) !important;
  /* primary-600 */
  font-weight: 600 !important;
}

.easepick .day.today:hover {
  background-color: rgb(224 231 255) !important;
  /* primary-100 */
}

.easepick .day.today.selected {
  background-color: rgb(79 70 229) !important;
  /* primary-600 */
  color: white !important;
}

.easepick .day.other-month {
  color: #d1d5db !important;
}

.easepick .day.other-month:hover {
  background-color: #f9fafb !important;
  color: #9ca3af !important;
}

.easepick .day.disabled {
  color: #d1d5db !important;
  cursor: not-allowed !important;
}

.easepick .day.disabled:hover {
  background-color: transparent !important;
  color: #d1d5db !important;
}

/* Footer styling for buttons */
.easepick .footer {
  padding: 12px 16px !important;
  border-top: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.easepick .footer button {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.easepick .footer .cancel-button {
  background-color: white !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}

.easepick .footer .cancel-button:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
}

.easepick .footer .apply-button {
  background-color: rgb(79 70 229) !important;
  /* primary-600 */
  color: white !important;
  border: 1px solid rgb(79 70 229) !important;
}

.easepick .footer .apply-button:hover {
  background-color: rgb(67 56 202) !important;
  /* primary-700 */
  border-color: rgb(67 56 202) !important;
}

/* Fix for overlapping elements */
.relative:has(.easepick-wrapper) {
  z-index: 999;
}

/* Ensure form elements don't overlap */
.form-field {
  position: relative;
  z-index: 1;
}

/* Special handling for elements that might overlap */
input,
select,
textarea,
button {
  z-index: 2;
}

/* But make sure datepicker input has lower z-index when picker is open */
.easepick-wrapper input {
  z-index: 1 !important;
}