@import url("calendar-filter-v2.17d117610bd9.css");
@import url("calendar-spatial-stability.795085eafc6f.css");

/* Lot R2 — calendrier collectif : anatomie par vue et densité de la maille annuelle. */

/* --- Maille annuelle : signal de densité, jamais un titre par occurrence --- */

#calendar-root[data-year-density="true"] .fc-daygrid-day-frame {
  position: relative;
  min-height: 2.25rem;
}

.calendar-year-density {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin: var(--space-1) auto 0;
  padding: 0 var(--space-1);
  border: var(--border-width-default) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--typography-family-sans);
  font-size: var(--typography-size-caption);
  font-weight: var(--typography-weight-semibold);
  line-height: 1;
  cursor: pointer;
}

/* La couleur ne porte jamais seule le sens : le nombre reste écrit et le
   contraste de bordure double le palier. */
.calendar-year-density[data-tier="1"] {
  background: var(--color-surface);
}

.calendar-year-density[data-tier="2"] {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
}

.calendar-year-density[data-tier="3"] {
  background: var(--color-brand);
  border-color: var(--color-brand-strong);
  color: var(--color-canvas);
}

.calendar-year-density:hover {
  border-color: var(--color-brand-strong);
}

.calendar-year-density:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus);
  outline-offset: 2px;
}

.calendar-year-density__count {
  pointer-events: none;
}

/* Un jour sans occurrence reste neutre : aucun marqueur, aucun fond. */
.calendar-year-day--free {
  background: transparent;
}

/* --- Anatomie par vue --- */

/* Jour : heure et durée en tête de bloc. */
.calendar-event[data-anatomy="day"] .calendar-event__time {
  font-weight: var(--typography-weight-semibold);
}

.calendar-event__state {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--typography-size-caption);
  font-weight: var(--typography-weight-semibold);
}

/* Mois : titre court d'abord, signal temporel minimal ensuite. */
.calendar-event[data-anatomy="month"] .calendar-event__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event[data-anatomy="month"] .calendar-event__time {
  font-size: var(--typography-size-caption);
  color: var(--color-muted);
}

/* Liste : la force de scan reste au couple temps natif + titre. */
.calendar-event[data-anatomy="list"] .calendar-event__title {
  font-weight: var(--typography-weight-semibold);
}

/* --- Smartphone --- */

@media (max-width: 700px) {
  /* Sur smartphone la cible tactile est la journée entière, pas une pastille. */
  .calendar-year-density {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    margin-inline: 0;
  }

  /* Premier bloc perceptif d'un événement : heure puis titre. */
  .calendar-event[data-anatomy="day"] {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}

/* --- Filtres : un calendrier filtré doit dire qu'il l'est --- */

.calendar-filter-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-canvas);
  font-size: var(--typography-size-caption);
  font-weight: var(--typography-weight-semibold);
  line-height: 1;
}

.calendar-filter-toggle[data-active-filters] {
  border-color: var(--color-brand);
}