/* DatePicker Component Styles */

.date-range-picker {
  width: 100%;
}

.date-range-picker .input-wrapper {
  margin-bottom: 0;
}

.date-range-picker .input-wrapper:last-child {
  margin-bottom: 0;
}

/* Ensure date inputs have consistent width */
.date-range-picker input[type="date"] {
  width: 100%;
  min-width: 0;
}

/* Add left padding to date input text */
.date-range-picker input[type="date"],
.date-range-picker input[type="text"] {
  padding-left: 8px;
}

/* Also target the Input component used in single mode */
.date-range-picker .input-wrapper input[type="date"],
.date-range-picker .input-wrapper input[type="text"] {
  padding-left: 8px;
}

/* Responsive layout for smaller screens */
@media (max-width: 470px) {
  .date-range-picker > div {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .date-range-picker .input-wrapper {
    margin-bottom: 8px;
    width: 100%;
  }
}