/* calendar.css - Full overrides for your palette */

/* Toolbar background and border */
#calendar-container .fc-toolbar {
  background-color: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Toolbar buttons: next, prev, today */
#calendar-container .fc-toolbar .fc-button.fc-button-primary {
  background-color: var(--primary) !important;
  border-color: var(--border) !important;
  color: var(--primary-light) !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

#calendar-container .fc-toolbar .fc-button.fc-button-primary:hover,
#calendar-container .fc-toolbar .fc-button.fc-button-primary:focus {
  background-color: var(--primary-dark) !important;
  border-color: var(--border) !important;
  color: var(--primary-light) !important;
  box-shadow: none !important;
}

/* Disabled buttons */
#calendar-container .fc-button:disabled,
#calendar-container .fc-button.fc-button-disabled {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-disabled) !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Icons inside buttons (e.g. chevrons) */
#calendar-container .fc-toolbar .fc-button .fc-icon {
  color: var(--primary-light) !important;
  fill: var(--text-primary) !important;
}

/* Column headers (e.g. Mo, Di, Mi...) */
#calendar-container .fc-col-header-cell-cushion {
  color: var(--primary) !important;
  font-weight: 700;
}

/* Day numbers */
#calendar-container .fc-daygrid-day-number {
  color: var(--primary) !important;
  font-weight: 600;
}

/* Events container & background */
#calendar-container .fc-event {
  background-color: var(--primary) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  font-weight: 600;
  cursor: pointer;
}

/* Event title text */
#calendar-container .fc-event-title,
#calendar-container .fc-event-title-container {
  color: var(--primar-light) !important;
  background-color: var(--primary) !important;
  border-color: var(--border) !important;
  font-weight: 600;
  padding: 2px 4px !important;
}


.flatpickr-day.today {
  background-color: var(--bg) !important;
    color: var(--text) !important;
    font-weight: bold;
}

/* Selected dates or highlight */
#calendar-container .fc-daygrid-day.fc-day-today {
  background-color: var(--primary-light) !important;
}

/* Background of the calendar grid */
#calendar-container .fc-daygrid-body {
  background-color: var(--bg) !important;
}

/* Remove any default FullCalendar blues in buttons and links */
#calendar-container a.fc-button {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

/* Scrollbar track and thumb for calendar if visible */
#calendar-container .fc-scroller::-webkit-scrollbar-track {
  background: var(--bg) !important;
}
#calendar-container .fc-scroller::-webkit-scrollbar-thumb {
  background-color: var(--primary-dark) !important;
  border-radius: 5px;
}

/* Optional: Hover effect on events */
#calendar-container .fc-event:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* For event popover or pop-up if used */
#calendar-container .fc-popover {
  background-color: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Make sure modal (bootstrap) buttons and other elements use your palette */
#calendar-container .btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--border) !important;
  color: var(--primary-light) !important;
}
#calendar-container .btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--border) !important;
  color: var(--primary-light) !important;
}
#calendar-container .btn-danger {
  background-color: var(--primary)  !important;
  border-color: var(--border) !important;
  color: var(--primary-light)!important;
}
#calendar-container .btn-danger:hover {
  background-color: var(--primary-dark)  !important;
  border-color: var(--border)  !important;
  color: var(--primary-light);
}

/* Reset disabled Today button to FullCalendar's default */
#calendar-container .fc-button.fc-button-primary.fc-today-button:disabled {
  background-color: var(--primary) !important; /* default light bg */
  border-color: var(--border) !important;     /* default border */
  color: var(--primary-light)!important;            /* default disabled text gray */
  opacity: 1 !important;                 /* remove opacity */
  cursor: default !important;
  box-shadow: none !important;
}

/* Also reset hover/focus so it stays neutral */
#calendar-container .fc-button.fc-button-primary.fc-today-button:disabled:hover,
#calendar-container .fc-button.fc-button-primary.fc-today-button:disabled:focus {
  background-color: var(--primary) !important;
  border-color: var(--border) !important;
  color: var(--primary-light) !important;
  box-shadow: none !important;
}

/* Checkbox label text */
#calendar-container #locationCheckboxes .form-check-label {
  color: var(--primary);
}

/* Checkbox input (the check mark and box border) */
#calendar-container #locationCheckboxes .form-check-input {
  border-color: var(--border);
}

/* When checkbox is checked - change the check mark color and background */
#calendar-container #locationCheckboxes .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--border);
}

/* On focus (accessibility keyboard focus) */
#calendar-container #locationCheckboxes .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* customize if needed */
  outline: none;
}

/* Timepicker input text and border */
#calendar-container #freezingTime {
  background-color: transparent; /* or your desired background */
}

/* Timepicker input focus */
#calendar-container #freezingTime:focus {
  border-color: var(--border);
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
  outline: none;
}