/**
 * @file
 * Responsive styles for FullCalendar views.
 *
 * Improves display of FullCalendar on mobile and narrow screens.
 *
 * Breakpoints align with tokens.css:
 * - --breakpoint-tablet: 900px (switches to list view via JS)
 * - --breakpoint-mobile: 600px
 * - --breakpoint-small:  480px
 */

/* Ensure FullCalendar container is responsive */
.view-fullcalendar-view,
.block-fullcalendar-view {
  min-width: 0; /* Important in flexbox/grid layouts */
  width: 100%;
}

/* Ensure calendar occupies full width */
.view-fullcalendar-view .fc,
.view-fullcalendar-view .fc-media-screen {
  width: 100% !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Reduce padding on mobile */
  .fc .fc-toolbar {
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  /* Stack toolbar buttons vertically on very small screens */
  @media (max-width: 480px) {
    .fc .fc-toolbar {
      flex-direction: column;
      gap: 0.5rem;
    }

    .fc .fc-toolbar-chunk {
      width: 100%;
      justify-content: center;
    }
  }

  /* Improve list view readability on mobile */
  .fc-list-event {
    font-size: 0.875rem;
  }

  .fc-list-event-time {
    flex-shrink: 0;
  }

  /* Make day grid cells more compact */
  .fc-daygrid-day-number {
    font-size: 0.875rem;
  }

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

  /* Ensure event titles wrap instead of overflow */
  .fc-event-title {
    white-space: normal;
    word-break: break-word;
  }
}

/* Ensure calendar doesn't overflow its container */
.fc-view-harness {
  max-width: 100%;
  overflow-x: auto;
}

/* Fix for FullCalendar in blocks with flex/grid layouts */
.region-content .block-fullcalendar-view,
.region-sidebar-first .block-fullcalendar-view,
.region-sidebar-second .block-fullcalendar-view {
  min-width: 0;
  width: 100%;
}

/* ────────────────────────────────────────────────────────────────────
   Empty-month state (mobile list view). FullCalendar's default
   ".fc-list-empty" text ("Aucun événement à afficher") is small and low
   contrast — on the light calendar surface it reads as an almost-blank grey
   square. Turn it into an explicit, centred empty state with an icon, the
   message, and a hint to browse other months.
   Markup: .fc-list-empty-wrap2 > .fc-list-empty-wrap1 > .fc-list-empty(text)
   ──────────────────────────────────────────────────────────────────── */
.fc-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 200px;
  padding: 2rem 1.25rem;
  text-align: center;
  color: #1b1b1b;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.fc-list-empty::before {
  content: "📅";
  font-size: 2.5rem;
  line-height: 1;
}
.fc-list-empty::after {
  content: "Utilisez les flèches ‹ › pour parcourir les autres mois.";
  font-weight: 400;
  font-size: 0.9rem;
  color: #555;
}

/* Past event styling - visually distinguish past events */
.fc-event-past {
  opacity: 0.5;
  filter: grayscale(50%);
  cursor: pointer;
}

.fc-event-past:hover {
  opacity: 0.7;
  cursor: pointer;
}

/* Multi-day secondary dates: visual reminder, not clickable */
.fc-event-multiday-secondary {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
  border-style: dashed !important;
}

.fc-event-multiday-secondary .fc-event-title::after {
  content: ' (suite)';
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.7;
}