/* Custom datepicker styling */
.ui-datepicker {
  z-index: 9999 !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 10px !important;
  font-family: inherit !important;
  font-size: 14px !important;
}

.ui-datepicker-header {
  background: #f8f9fa !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ui-datepicker-title {
  font-weight: 600 !important;
  color: #495057 !important;
  font-size: 16px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.ui-datepicker-month,
.ui-datepicker-year {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  color: #495057 !important;
  min-width: 80px !important;
  text-align: center !important;
}

.ui-datepicker-month:focus,
.ui-datepicker-year:focus {
  outline: none !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  background: #6c757d !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  top: auto !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: #495057 !important;
  transform: scale(1.1) !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  font-size: 12px !important;
}

.ui-datepicker-calendar {
  border-collapse: separate !important;
  border-spacing: 2px !important;
  width: 100% !important;
  margin-top: 5px !important;
}

.ui-datepicker-calendar th {
  background: #e9ecef !important;
  color: #6c757d !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
}

.ui-datepicker-calendar td {
  padding: 1px !important;
  text-align: center !important;
}

.ui-datepicker-calendar td a {
  display: block !important;
  padding: 10px 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  color: #495057 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  min-width: 36px !important;
  min-height: 36px !important;
  line-height: 1.2 !important;
}

.ui-datepicker-calendar td a:hover {
  background: #e9ecef !important;
  color: #212529 !important;
  transform: scale(1.05) !important;
}

.ui-datepicker-calendar .ui-datepicker-today a {
  background: #fff3cd !important;
  border-color: #ffeaa7 !important;
  color: #856404 !important;
  font-weight: 600 !important;
}

.ui-datepicker-calendar .ui-datepicker-current-day a,
.ui-datepicker-calendar .ui-state-active {
  background: #007bff !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3) !important;
}

.ui-datepicker-calendar .ui-datepicker-unselectable .ui-state-disabled {
  background: #f8f9fa !important;
  color: #ced4da !important;
  opacity: 0.5 !important;
}

/* Ensure datepicker appears above modals and other elements */
.ui-datepicker {
  position: absolute !important;
  min-width: 320px !important;
  max-width: 360px !important;
}
.ui-datepicker span {
  border: none !important;
}

.ui-datepicker td {
  border-radius: 6px !important;
}


/* Button panel styling */
.ui-datepicker-buttonpane {
  /*background: #f8f9fa !important;*/
  border: none !important;
  border-radius: 0 0 6px 6px !important;
  padding: 10px !important;
  margin: 10px -10px -10px -10px !important;
  text-align: center !important;
}

.ui-datepicker-buttonpane button {
  background: #007bff !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  margin: 0 5px !important;
  transition: background-color 0.2s ease !important;
}

.ui-datepicker-buttonpane button:hover {
  background: #0056b3 !important;
}

.ui-datepicker-close {
  background: #6c757d !important;
}

.ui-datepicker-close:hover {
  background: #545b62 !important;
}

/* Add animation */
.ui-datepicker {
  animation: fadeInDown 0.3s ease-out !important;
}
.ui-datepicker .ui-state-disabled {
  pointer-events: auto !important;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Selected date animation */
.selected-date {
  background-color: #e3f2fd !important;
  transition: background-color 0.3s ease !important;
}