@import "react-date-range/dist/styles.css";
@import "react-date-range/dist/theme/default.css";

/* ─── Dark mode overrides ─────────────────────────────────────────────────── */

.dark .rdrCalendarWrapper {
  color: var(--color-secondary-25);
  background-color: var(--color-secondary-800);
}

.dark .rdrDateDisplayWrapper {
  background-color: var(--color-secondary-700);
}

.dark .rdrDateDisplayItem {
  background-color: var(--color-secondary-800);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.dark .rdrDateDisplayItem input {
  color: var(--color-secondary-300);
}

.dark .rdrMonthAndYearPickers select {
  color: var(--color-secondary-25);
}

.dark .rdrMonthAndYearPickers select:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

.dark .rdrNextPrevButton {
  background: var(--color-secondary-700);
}

.dark .rdrNextPrevButton:hover {
  background: var(--color-secondary-600);
}

.dark .rdrPprevButton i {
  border-color: transparent var(--color-secondary-25) transparent transparent;
}

.dark .rdrNextButton i {
  border-color: transparent transparent transparent var(--color-secondary-25);
}

.dark .rdrWeekDay {
  color: var(--color-secondary-400);
}

.dark .rdrDay {
  color: var(--color-secondary-25);
}

.dark .rdrDayPassive .rdrDayNumber span {
  color: var(--color-secondary-600);
}

.dark .rdrDayDisabled {
  background-color: var(--color-secondary-800);
}

.dark .rdrDayDisabled .rdrDayNumber span {
  color: var(--color-secondary-600);
}

.dark .rdrDefinedRangesWrapper {
  background: var(--color-secondary-800);
  border-right-color: var(--color-secondary-700);
}

.dark .rdrStaticRange {
  background: var(--color-secondary-800);
  border-bottom-color: var(--color-secondary-700);
  color: var(--color-secondary-25);
}

.dark .rdrStaticRange:hover .rdrStaticRangeLabel,
.dark .rdrStaticRange:focus .rdrStaticRangeLabel {
  background: var(--color-secondary-700);
}

.dark .rdrInputRangeInput {
  background: var(--color-secondary-800);
  border-color: var(--color-secondary-600);
  color: var(--color-secondary-200);
}

.dark .rdrInputRangeInput:focus,
.dark .rdrInputRangeInput:hover {
  border-color: var(--color-secondary-400);
  color: var(--color-secondary-100);
}

.dark .rdrMonthName {
  color: var(--color-secondary-400);
}
