/**
 * @file
 * Minimal styling for BAT booking calendar integration.
 *
 * This file only contains FullCalendar overrides to match the design system.
 * Layout and component styling is handled by Tailwind in the template.
 */

/* Session Type Cards - Interactive Selection */
.session-type-card {
  position: relative;
  transition: all 0.3s ease;
}

.session-type-card:hover {
  transform: translateY(-2px);
}

.session-type-card.selected {
  border-color: var(--color-blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

@media (prefers-color-scheme: dark) {
  .session-type-card.selected {
    border-color: var(--color-blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }
}

.selection-indicator {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Calendar wrapper - ensure proper sizing */
.calendar-wrapper {
  width: 100%;
  overflow: hidden;
}

/* FullCalendar v3 Overrides - Match Design System */

/* Calendar base styling */
#booking-calendar {
  max-width: 100%;
}

/* Toolbar buttons */
.fc .fc-button-primary {
  background-color: var(--color-blue-600);
  border-color: var(--color-blue-600);
  font-family: inherit;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.fc .fc-button-primary:hover {
  background-color: var(--color-blue-700);
  border-color: var(--color-blue-700);
}

.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--color-blue-800);
  border-color: var(--color-blue-800);
}

@media (prefers-color-scheme: dark) {
  .fc .fc-button-primary {
    background-color: var(--color-blue-500);
    border-color: var(--color-blue-500);
  }

  .fc .fc-button-primary:hover {
    background-color: var(--color-blue-600);
    border-color: var(--color-blue-600);
  }
}

/* Toolbar title */
.fc .fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

@media (prefers-color-scheme: dark) {
  .fc .fc-toolbar-title {
    color: var(--color-gray-50);
  }
}

/* Day headers */
.fc th {
  color: var(--color-gray-500);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 0;
}

@media (prefers-color-scheme: dark) {
  .fc th {
    color: var(--color-gray-400);
  }
}

/* Calendar cells */
.fc td {
  border-color: var(--color-gray-200);
}

@media (prefers-color-scheme: dark) {
  .fc td {
    border-color: var(--color-gray-700);
  }

  .fc {
    background-color: var(--color-gray-800);
  }
}

/* Past dates - grayed out */
.fc .past-date {
  background-color: var(--color-gray-100);
  opacity: 0.5;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .fc .past-date {
    background-color: var(--color-gray-700);
  }
}

.fc .past-date .fc-day-number {
  color: var(--color-gray-400);
}

@media (prefers-color-scheme: dark) {
  .fc .past-date .fc-day-number {
    color: var(--color-gray-500);
  }
}

/* Available events - green (state = 0) */
.fc-event.bat-available,
.fc-event[title*="Available"] {
  background-color: var(--color-emerald-500);
  border-color: var(--color-emerald-600);
  cursor: pointer;
}

.fc-event.bat-available:hover,
.fc-event[title*="Available"]:hover {
  background-color: var(--color-emerald-600);
}

/* Selected time slot - blue highlight */
.fc-event.selected-time-slot {
  background-color: var(--color-blue-600);
  border-color: var(--color-blue-700);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
  position: relative;
  z-index: 10;
}

@media (prefers-color-scheme: dark) {
  .fc-event.selected-time-slot {
    background-color: var(--color-blue-500);
    border-color: var(--color-blue-600);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
  }
}

/* Booked/Unavailable events - red */
.fc-event.bat-booked,
.fc-event.bat-unavailable,
.fc-event[title*="Booked"] {
  background-color: var(--color-red-500);
  border-color: var(--color-red-600);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Tentative events - yellow/amber */
.fc-event.bat-tentative,
.fc-event[data-state="tentative"] {
  background-color: var(--color-amber-500);
  border-color: var(--color-amber-600);
}

/* Event text */
.fc-event-title {
  font-weight: 500;
  font-size: 0.875rem;
}

/* Section disabled state - visible but not interactive */
.section-disabled {
  position: relative;
  opacity: 0.5;
  pointer-events: none;
}

.section-disabled::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  cursor: not-allowed;
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .fc .fc-toolbar {
    flex-direction: column;
    gap: 0.75rem;
  }

  .fc .fc-toolbar-title {
    font-size: 1.25rem;
  }

  .fc .fc-button-primary {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }

  .fc-event-title {
    font-size: 0.75rem;
  }
}