/* Custom react-datepicker styles using Chakra UI semantic tokens */

.react-datepicker {
  font-family: var(--font-body);
  background-color: var(--chakra-colors-bg-panel);
  border: 1px solid var(--chakra-colors-border-default);
  border-radius: var(--chakra-radii-lg);
  box-shadow: var(--chakra-shadows-lg);
}

.react-datepicker__header {
  background-color: var(--chakra-colors-bg-subtle);
  border-bottom: 1px solid var(--chakra-colors-border-default);
  border-top-left-radius: var(--chakra-radii-lg);
  border-top-right-radius: var(--chakra-radii-lg);
  padding-top: 8px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  color: var(--chakra-colors-fg) !important;
  font-weight: var(--chakra-fontWeights-semibold);
  font-size: var(--chakra-fontSizes-sm);
}

.react-datepicker__day-name {
  color: var(--chakra-colors-fg-muted);
  font-size: var(--chakra-fontSizes-xs);
  font-weight: var(--chakra-fontWeights-medium);
}

.react-datepicker__day {
  color: var(--chakra-colors-fg) !important;
  border-radius: var(--chakra-radii-md);
  font-size: var(--chakra-fontSizes-sm);
}

.react-datepicker__day:hover {
  background-color: var(--chakra-colors-blue-subtle);
  color: var(--chakra-colors-fg) !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range {
  background-color: var(--chakra-colors-blue-solid);
  color: var(--chakra-colors-blue-contrast) !important;
  font-weight: var(--chakra-fontWeights-medium);
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover {
  background-color: var(--chakra-colors-blue-emphasized);
  color: var(--chakra-colors-blue-contrast) !important;
}

.react-datepicker__day--keyboard-selected {
  background-color: var(--chakra-colors-blue-muted);
  color: var(--chakra-colors-fg) !important;
}

.react-datepicker__day--keyboard-selected:hover {
  background-color: var(--chakra-colors-blue-subtle);
  color: var(--chakra-colors-fg) !important;
}

.react-datepicker__day--range-start,
.react-datepicker__day--range-end {
  background-color: var(--chakra-colors-blue-solid);
  color: var(--chakra-colors-blue-contrast) !important;
  font-weight: var(--chakra-fontWeights-semibold);
}

.react-datepicker__day--disabled {
  color: var(--chakra-colors-fg-subtle);
  cursor: not-allowed;
}

.react-datepicker__day--disabled:hover {
  background-color: transparent;
}

.react-datepicker__day--outside-month {
  color: var(--chakra-colors-fg-subtle);
}

.react-datepicker__day--today {
  font-weight: var(--chakra-fontWeights-semibold);
  color: var(--chakra-colors-blue-fg);
}

.react-datepicker__navigation {
  top: 0;
}

.react-datepicker__navigation-icon::before {
  border-color: var(--chakra-colors-fg-muted);
}

.react-datepicker__navigation:hover .react-datepicker__navigation-icon::before {
  border-color: var(--chakra-colors-fg-default);
}

.react-datepicker__month-container {
  background-color: var(--chakra-colors-bg-panel);
}

.react-datepicker__month {
  margin: 0.4rem;
}

.react-datepicker__day-names {
  border-bottom: 1px solid var(--chakra-colors-border-subtle);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* Multi-month view spacing */
.react-datepicker__month-container + .react-datepicker__month-container {
  border-left: 1px solid var(--chakra-colors-border-default);
}

/* Time picker styles (if needed) */
.react-datepicker__time-container {
  border-left: 1px solid var(--chakra-colors-border-default);
}

.react-datepicker__time-container .react-datepicker__time {
  background-color: var(--chakra-colors-bg-panel);
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 100%;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  padding: 0;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  color: var(--chakra-colors-fg) !important;
  padding: 8px 10px;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  background-color: var(--chakra-colors-bg-subtle);
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: var(--chakra-colors-blue-solid);
  color: var(--chakra-colors-blue-contrast);
  font-weight: var(--chakra-fontWeights-medium);
}

/* Triangle pointer (if used) */
.react-datepicker__triangle {
  display: none;
}

/* Focus styles */
.react-datepicker__day:focus,
.react-datepicker__month-text:focus,
.react-datepicker__quarter-text:focus,
.react-datepicker__year-text:focus {
  outline: 2px solid var(--chakra-colors-blue-focusRing);
  outline-offset: 2px;
}