/* Admin dark theme overrides (load /css/react-datepicker.css before this file) */
.react-datepicker-popper.rtr-datepicker-popper {
  z-index: 300;
}

.react-datepicker.rtr-datepicker-calendar {
  font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  background: #1a1a2e;
  border: 3px solid #000;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #000;
  color: #fff;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__header {
  background: #111125;
  border-bottom: 2px solid #2a2a45;
  padding-top: 0.75rem;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__current-month,
.react-datepicker.rtr-datepicker-calendar .react-datepicker-time__header,
.react-datepicker.rtr-datepicker-calendar .react-datepicker-year-header {
  color: #ffd700;
  font-weight: 700;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__day-name {
  color: #7878a0;
  font-weight: 600;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__day,
.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-name {
  color: #fff;
  border-radius: 6px;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__day:hover,
.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-list-item:hover {
  background: #2a2a45;
  color: #fff;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__day--selected,
.react-datepicker.rtr-datepicker-calendar .react-datepicker__day--keyboard-selected,
.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-list-item--selected {
  background: #ffd700 !important;
  color: #000 !important;
  font-weight: 700;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__day--disabled,
.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-list-item--disabled {
  color: #4a4a6a;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__navigation-icon::before {
  border-color: #ffd700;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__triangle {
  display: none;
}

.react-datepicker.rtr-datepicker-calendar--time {
  width: 8.5rem;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-container {
  background: #1a1a2e;
  border-left: 2px solid #2a2a45;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-list {
  background: #1a1a2e;
}

.react-datepicker.rtr-datepicker-calendar .react-datepicker__time-list-item {
  color: #fff;
}

.match-datetime-pickers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.match-datetime-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.match-datetime-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted, #7878a0);
}

.match-datetime-pickers .datepicker-input {
  width: 100%;
  box-sizing: border-box;
}

.kickoff-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.kickoff-preset-btn {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.55rem !important;
}