/* Past lessons keep a muted tint of the teacher's selected colour. */
.calendar-week-event.is-past:not(.is-cancelled),
.teacher-month-day button.is-past:not(.is-cancelled) {
  border-color: color-mix(in srgb, var(--booking-border, #f4a0a5) 55%, #aeb3ba);
  color: color-mix(in srgb, var(--booking-text, #681216) 55%, #60666f);
  background: color-mix(in srgb, var(--booking-bg, #fbd6d9) 60%, #e5e7ea);
  opacity: 0.85;
  filter: none;
  box-shadow: none;
}

.calendar-week-event.is-past:not(.is-cancelled) {
  border-left-color: color-mix(in srgb, var(--booking-accent, #e50914) 55%, #777e87);
}

.calendar-week-event.is-past:not(.is-cancelled):hover {
  opacity: 1;
  filter: none;
}

.teacher-month-day button.is-past:not(.is-cancelled) b {
  color: inherit;
}

.teacher-booking-item.is-past:not(.is-cancelled),
.calendar-google-sidebar .teacher-booking-item.is-past:not(.is-cancelled) {
  opacity: 0.78;
  filter: none;
}

.teacher-booking-item.is-past:not(.is-cancelled) > time,
.calendar-google-sidebar .teacher-booking-item.is-past:not(.is-cancelled) > time {
  color: color-mix(in srgb, var(--booking-text, #681216) 55%, #60666f);
  background: color-mix(in srgb, var(--booking-bg, #fbd6d9) 60%, #e5e7ea);
}

.calendar-booking-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.calendar-merge-students-button {
  border: 1px solid #dfe2e7;
  border-radius: 12px;
  padding: 10px 14px;
  color: #74252b;
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.calendar-merge-students-button[hidden] { display: none; }
.calendar-student-merge-dialog > section {
  display: block;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
}
.calendar-student-merge-dialog header { display: flex; justify-content: space-between; gap: 16px; }
.calendar-student-merge-dialog header > button { align-self: flex-start; border: 0; background: transparent; font-size: 26px; cursor: pointer; }
.calendar-student-merge-choice { display: grid; gap: 6px; margin: 16px 0 8px; color: #555c68; font-size: 0.8rem; }
.calendar-student-merge-choice select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #dfe2e7; border-radius: 10px; font: inherit; }
.calendar-student-merge-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.calendar-student-merge-cards article { min-width: 0; padding: 14px; border: 1px solid #e1e4ea; border-radius: 14px; background: #f9fafc; overflow-wrap: anywhere; }
.calendar-student-merge-cards strong { display: block; margin-bottom: 6px; }
.calendar-student-merge-dialog [data-student-merge-email] { overflow-wrap: anywhere; }
.calendar-student-merge-dialog [data-student-merge-status].is-error { color: #b5232c; }
.calendar-student-merge-dialog details { margin: 12px 0; font-size: 0.85rem; }
.calendar-student-merge-dialog details li { margin: 8px 0; }
.calendar-student-merge-dialog footer { margin-top: 18px; }
.calendar-student-merge-dialog footer button { white-space: normal; height: auto; min-height: 42px; line-height: 1.4; }
@media (max-width: 600px) {
  .calendar-student-merge-cards { grid-template-columns: 1fr; }
  .calendar-student-merge-dialog footer { flex-direction: column-reverse; }
  .calendar-student-merge-dialog footer button { width: 100%; }
}

.calendar-student-filter {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7c838d;
  font-size: 0.73rem;
  font-weight: 700;
}

.calendar-student-filter select {
  width: 170px;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 0 28px 0 11px;
  border: 1px solid #dfe2e7;
  border-radius: 9px;
  background: #fff;
  text-overflow: ellipsis;
}

.teacher-booking-item > [data-booking-details-anchor] {
  width: fit-content;
  max-width: 100%;
}

.calendar-google-view-controls {
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .calendar-bookings-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .calendar-booking-filters {
    width: 100%;
  }

  .calendar-booking-filters label {
    min-width: 0;
    flex: 1 1 140px;
  }

  .calendar-booking-filters select {
    width: 100%;
    min-width: 0;
  }

  .calendar-google-view-controls > .calendar-student-filter {
    grid-column: 1 / -1;
  }

  .calendar-google-view-controls > .calendar-student-filter select {
    flex: 1;
  }
}