/* Custom styles for DatePickerRange component */

/* Date picker container */
.DateRangePickerInput {
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

/* Input fields */
.DateInput {
  width: 190px;
  background: transparent;
}

.DateInput_input {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border: none;
  height: calc(1.5em + 0.5rem + 2px);
}

/* Input focus */
.DateInput_input__focused {
  border-bottom: 2px solid #007bff;
}

/* Calendar icon */
.DateRangePickerInput_calendarIcon {
  padding: 0 5px;
  margin: 0;
}

/* Date range separator */
.DateRangePickerInput_arrow {
  margin: 0 5px;
}

/* Calendar styles */
.CalendarMonth_caption {
  padding-bottom: 10px;
  font-weight: bold;
}

.DayPicker_weekHeader {
  top: 50px;
}

.CalendarDay__selected, 
.CalendarDay__selected:hover {
  background: #007bff;
  border: 1px solid #007bff;
  color: white;
}

.CalendarDay__selected_span {
  background: #b3d7ff;
  border: 1px solid #b3d7ff;
  color: #212529;
}

.CalendarDay__hovered_span, 
.CalendarDay__hovered_span:hover {
  background: #e6f2ff;
  border: 1px solid #e6f2ff;
  color: #212529;
}

/* Date time picker dialog portal */
.DateRangePicker_picker {
  z-index: 1050; /* Higher than most Bootstrap components */
}