/**
 * Date Range Picker Calendar Styles
 * 
 * These styles provide the visual states for the date selection calendar.
 * They use CSS custom properties from design_system.css for theming.
 */

/* Selected date (start or end) */
.date-selected {
  background-color: var(--color-primary) !important;
  color: white !important;
  font-weight: 600;
}

/* Start date - rounded on the left */
.date-start {
  border-radius: 9999px;
}

/* End date - rounded on the right */
.date-end {
  border-radius: 9999px;
}

/* Dates between start and end */
.date-in-range {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* Preview hover state when selecting end date */
.date-preview {
  background-color: var(--color-primary-soft) !important;
  opacity: 0.7;
}

/* Calendar day cell base styles */
.date-cell {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

/* Hover effect for available dates */
.date-cell:not(:disabled):hover {
  background-color: var(--color-surface-muted);
}

/* Override hover when date is selected or in range */
.date-selected:hover,
.date-in-range:hover {
  opacity: 0.9;
}