/* Overall Calendar Container */
.react-calendar {
  background-color: transparent;
  width: 300px !important;
  max-width: 100%;
  border: none;
}

/* Month & Year Navigation Buttons */
.react-calendar__navigation button {
  color: var(--cal-nav-text) !important;
  font-size: 14px;
  font-weight: bold;
  background: transparent;
  border: none;
  padding: 2px;
  border-radius: 5px;
  transition: background 0.2s ease-in-out;
}

/* Disabled Buttons */
.react-calendar__navigation button:disabled {
  color: var(--cal-disabled-text) !important;
  cursor: not-allowed;
  background: none;
}

/* ------------------------------------------------------------------------------ */

/* Individual Day Tiles */
.react-calendar__tile {
  padding: 10px !important;
  text-align: center;
  font-size: 0.75rem;
  border-radius: 5rem;
  transition: background 0.2s ease-in-out;
  color: #cbd5e0;
  border-radius: 4px;
  color: var(--cal-tile-text);
}

.react-calendar__tile:enabled {
  border-radius: 0.8rem;
}

/* Hover Effect on Days */
.react-calendar__tile:enabled:hover {
  background: var(--bg-primary) !important;
  color: var(--txt) !important;
}

/* Selected Date */
.react-calendar__tile--active {
  background: var(--btn) !important;
  color: #ffffff !important;
  font-weight: bold;
}

.react-calendar__tile--active {
  /* background: var(--cal-tile-active-bg) !important; */
  /* color: var(--cal-tile-active-text) !important; */
  font-weight: bold;
}

/* ------------------------------------------------------------------------- */

/* Change hover color of month names */
.react-calendar__year-view__months__month:hover {
  background-color: #2d3748 !important;
  color: #ffffff !important;
}

/* Change hover color of navigation buttons */
.react-calendar__navigation button:hover {
  background-color: #2d3748 !important;
  background-color: var(--bg-sec) !important;
  border-radius: 10px;
}

/* Ensure active month in year view is styled */
.react-calendar__year-view__months__month.react-calendar__tile--active {
  background-color: #4a5568 !important;
  color: #ffffff !important;
}
