/* FullCalendar Custom Styles */
.fc {
  font-family: inherit;
}

.fc-header-toolbar {
  @apply px-6 py-4;
}

.fc-toolbar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-base-content);
  text-transform: capitalize;
}

.fc-col-header-cell {
  padding: 8px 0;
  background-color: var(--color-base-200);
}

.fc-col-header-cell-cushion {
  color: var(--color-base-content);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

.fc-daygrid-day-number {
  color: var(--color-base-content);
  font-weight: 500;
  font-size: 0.875rem;
}

.fc-day-today {
  background-color: var(--color-info);;
}

.fc-day-today .fc-daygrid-day-number {
  color: var(--color-base-content);
  font-weight: 700;
}

/* Buttons - use DaisyUI styles and theme colors */
/* DaisyUI generates btn, btn-sm, btn-ghost, btn-primary classes automatically */
/* We use @apply for base styles, then override with theme colors to handle FullCalendar inline styles */

/* Inactive buttons (like "Oggi" and non-selected view buttons) */
.fc-button {
  @apply btn btn-sm btn-ghost;
  /* Force theme colors - override FullCalendar inline styles */
  background-color: transparent !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

/* Hover state for inactive buttons */
.fc-button:hover:not(.fc-button-primary):not(.fc-button-active) {
  @apply btn-ghost;
  background-color: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

/* Active state (click) for inactive buttons */
.fc-button:active:not(.fc-button-primary):not(.fc-button-active) {
  background-color: var(--color-base-300) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

/* Focus state for inactive buttons */
.fc-button:focus:not(.fc-button-primary):not(.fc-button-active) {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  background-color: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

.fc-button:focus-visible:not(.fc-button-primary):not(.fc-button-active) {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Disabled state */
.fc-button:disabled {
  @apply opacity-50 cursor-not-allowed;
  background-color: transparent !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
  opacity: 0.5 !important;
}

/* Active button (selected view - Mese/Settimana/Giorno) */
/* IMPORTANT: FullCalendar applies fc-button-primary to ALL view buttons */
/* Only buttons with .fc-button-active should be primary */
/* Buttons with only .fc-button-primary (without .fc-button-active) should be inactive */
.fc-button-active {
  @apply btn-primary;
  /* Force primary theme colors - override FullCalendar inline styles */
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
}

/* Override fc-button-primary when it's NOT active */
/* FullCalendar applies fc-button-primary to all view buttons, but only active one should be styled */
.fc-button-primary:not(.fc-button-active) {
  @apply btn btn-sm btn-ghost;
  /* Force inactive style - override FullCalendar's primary styling */
  background-color: transparent !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

/* Ensure non-primary buttons explicitly use inactive style */
/* This overrides any FullCalendar inline styles that might make them look primary */
.fc-button:not(.fc-button-primary):not(.fc-button-active) {
  @apply btn btn-sm btn-ghost;
  background-color: transparent !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}


/* Hover state for active buttons - only if they have fc-button-active */
.fc-button-active:hover {
  @apply btn-primary;
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
  opacity: 0.9 !important;
}

/* Hover state for inactive primary buttons (fc-button-primary without fc-button-active) */
.fc-button-primary:not(.fc-button-active):hover {
  @apply btn-ghost;
  background-color: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

/* Active state (click) for active buttons */
.fc-button-active:active {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
}

/* Active state (click) for inactive primary buttons */
.fc-button-primary:not(.fc-button-active):active {
  background-color: var(--color-base-300) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

/* Focus state for active buttons */
.fc-button-active:focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
}

.fc-button-active:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Focus state for inactive primary buttons */
.fc-button-primary:not(.fc-button-active):focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  background-color: var(--color-base-200) !important;
  color: var(--color-base-content) !important;
  border-color: var(--color-base-300) !important;
}

.fc-button-primary:not(.fc-button-active):focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

.fc-timegrid-slot-label {
  color: var(--color-base-content);
}

.fc-timegrid-slot {
  border-color: var(--color-base-300);
}

.fc-daygrid-day-frame {
  border-color: var(--color-base-300);
}

.fc-daygrid-day-events {
  margin: 0;
}

/* Base event styles applied to ALL calendar events */
.fc-event {
  border-radius: 0.375rem;
  border: 1px solid;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.fc-event:hover:not(.event-past):not(.event-disabled) {
  filter: brightness(0.9);
}

.calendar-event {
  border-radius: 0.375rem;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.calendar-event:hover:not(.event-past):not(.event-disabled) {
  filter: brightness(0.9);
}

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

.fc-event-time {
  font-size: 0.6875rem;
  opacity: 0.9;
}

/* Event content structure */
.event-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.125rem 0.25rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 1.25rem;
}

.event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.625rem;
  font-weight: bold;
}

.event-icon-full {
  border-radius: 50%;
  background-color: var(--color-error);
  border: 1.5px solid var(--color-base-100);
  width: 0.5rem;
  height: 0.5rem;
}

.event-icon-booked {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  background-color: var(--color-base-content);
  opacity: 0.1;
  font-size: 0.625rem;
  color: var(--color-base-100);
}

.event-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

/* Past events - use base-200 color directly */
.event-past {
  background-color: var(--color-base-200) !important;
  border-color: var(--color-base-300) !important;
  cursor: default !important;
}

.event-past .fc-event-title,
.event-past .event-text,
.event-past .event-content {
  color: var(--color-base-content) !important;
}

/* Disabled service - use base-200 color directly */
.event-disabled {
  background-color: var(--color-base-200) !important;
  border-color: var(--color-base-300) !important;
  cursor: not-allowed !important;
}

.event-disabled .fc-event-title,
.event-disabled .event-text,
.event-disabled .event-content {
  color: var(--color-base-content) !important;
}

/* Available/default - use info color directly */
.event-available {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}

.event-available .fc-event-title,
.event-available .event-text,
.event-available .event-content {
  color: var(--color-info-content) !important;
}

/* Full for provider - use info color directly */
.event-full {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
}

.event-full .fc-event-title,
.event-full .event-text,
.event-full .event-content {
  color: var(--color-info-content) !important;
}

/* Full for student - use info color directly with red circle */
.event-full-student {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  cursor: not-allowed !important;
}

.event-full-student .fc-event-title,
.event-full-student .event-text,
.event-full-student .event-content {
  color: var(--color-info-content) !important;
}

/* Booked for student - use success color directly */
.event-booked {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.event-booked .fc-event-title,
.event-booked .event-text,
.event-booked .event-content {
  color: var(--color-success-content) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .fc-toolbar {
    flex-direction: column;
    gap: 0.5rem;
    @apply px-6 py-4;
  }

  .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }

  .fc-button {
    @apply btn-xs;
  }

  .fc-event {
    padding: 0.0625rem 0.125rem;
    font-size: 0.625rem;
    border-radius: 0.25rem;
  }

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

  .event-content {
    padding: 0.0625rem 0.125rem;
    gap: 0.25rem;
  }

  .event-icon {
    width: 0.625rem;
    height: 0.625rem;
    font-size: 0.5rem;
  }

  .event-icon-full {
    width: 0.375rem;
    height: 0.375rem;
  }

  .event-icon-booked {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.5rem;
  }

  .event-text {
    font-size: 0.625rem;
  }

  .fc-timegrid-slot-label {
    font-size: 0.625rem;
  }
}

/* Modal styles */
.modal {
  @apply fixed inset-0 z-50 flex items-center justify-center;
}

.modal-backdrop {
  @apply absolute inset-0 bg-black bg-opacity-50;
}

.modal-box {
  @apply relative bg-base-100 rounded-lg shadow p-6 w-11/12 max-w-md;
}

.modal-action {
  @apply flex justify-end gap-2 mt-6;
}