/*
 * Bookings
 *
 * Component classes for booking calendar ViewComponents.
 */


.booking-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
}

.booking-header__actions,
.booking-header__date-controls {
  display: flex;
  align-items: center;
}

.booking-header__new-action {
  margin-inline-start: 1rem;
}

.booking-calendar {
  display: flex;
  flex-direction: column;
  block-size: 100vh;
}

.booking-calendar__body {
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: auto;
  background-color: var(--color-surface);
}

.booking-calendar__canvas {
  display: flex;
  flex: none;
  flex-direction: column;
  max-inline-size: 100%;
  inline-size: 165%;
}

.booking-calendar__content {
  display: flex;
  flex: 1 1 auto;
}

.booking-calendar__time-gutter {
  position: sticky;
  inset-inline-start: 0;
  z-index: 10;
  flex: none;
  inline-size: 3.5rem;
  background-color: var(--color-surface);
  box-shadow: inset -1px 0 0 var(--color-border-muted);
}

.booking-calendar__grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.booking-calendar-week-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  flex: none;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel), var(--shadow-ring-subtle);
}

.booking-calendar-week-header__mobile,
.booking-calendar-week-header__desktop {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-ink-lighter);
}

.booking-calendar-week-header__desktop {
  display: none;
  margin-inline-end: -1px;
  border-inline-end: 1px solid var(--color-border-muted);
}

.booking-calendar-week-header__desktop > * + * {
  border-inline-start: 1px solid var(--color-border-muted);
}

.booking-calendar-day-button,
.booking-calendar-day-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.75rem;
}

.booking-calendar-day-button__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 0.5rem 0.75rem;
}

.booking-calendar-day-button__number,
.booking-calendar-day-heading__number {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 0.25rem;
  inline-size: 2rem;
  block-size: 2rem;
  font-weight: 600;
  color: var(--color-ink);
}

.booking-calendar-day-button__number--selected,
.booking-calendar-day-button__number--today,
.booking-calendar-day-heading__number--today {
  border-radius: var(--radius-pill);
  color: var(--color-ink-inverted);
}

.booking-calendar-day-button__number--selected {
  background-color: rgb(var(--palette-teal-600));
}

.booking-calendar-day-button__number--today,
.booking-calendar-day-heading__number--today {
  background-color: rgb(var(--palette-indigo-300));
}

.booking-calendar-day-heading__today {
  display: flex;
  align-items: baseline;
}

.booking-calendar-day-heading__number {
  display: inline-flex;
  margin-block-start: 0;
  margin-inline-start: 0.375rem;
}

.booking-calendar-day-heading__number--weekend {
  color: rgb(var(--palette-red-800));
}

.booking-calendar-day-heading__number--weekday {
  color: var(--color-ink);
}

.booking-calendar-hours {
  display: grid;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  grid-template-rows: repeat(48, minmax(3.5rem, 1fr));
}

.booking-calendar-hours > * + * {
  border-block-start: 1px solid var(--color-border-muted);
}

.booking-calendar-hours__top-spacer {
  block-size: 1.75rem;
}

.booking-calendar-hours__label {
  position: sticky;
  inset-inline-start: 0;
  z-index: 20;
  margin-block-start: -0.625rem;
  margin-inline-start: -3.5rem;
  padding-inline-end: 0.5rem;
  inline-size: 3.5rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: end;
  color: var(--color-ink-medium);
}

.booking-calendar-columns {
  display: none;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.booking-calendar-columns > * + * {
  border-inline-start: 1px solid var(--color-border-muted);
}

.booking-calendar-columns__day {
  grid-row: 1 / -1;
}

.booking-calendar-columns__day--1 { grid-column-start: 1; }
.booking-calendar-columns__day--2 { grid-column-start: 2; }
.booking-calendar-columns__day--3 { grid-column-start: 3; }
.booking-calendar-columns__day--4 { grid-column-start: 4; }
.booking-calendar-columns__day--5 { grid-column-start: 5; }
.booking-calendar-columns__day--6 { grid-column-start: 6; }
.booking-calendar-columns__day--7 { grid-column-start: 7; }

.booking-calendar-columns__end-spacer {
  grid-column-start: 8;
  grid-row: 1 / -1;
  inline-size: 2rem;
}

@media (max-width: 767px) {
  .booking-header__bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-header__actions,
  .booking-header__date-controls {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .booking-header__new-action {
    margin-inline-start: 0;
  }
}

@media (min-width: 640px) {
  .booking-calendar__canvas {
    max-inline-size: none;
  }

  .booking-calendar-week-header {
    padding-inline-end: 2rem;
  }

  .booking-calendar-week-header__mobile {
    display: none;
  }

  .booking-calendar-week-header__desktop,
  .booking-calendar-columns {
    display: grid;
  }

  .booking-calendar-week-header__spacer {
    grid-column-end: 1;
    inline-size: 3.5rem;
  }
}

@media (min-width: 768px) {
  .booking-calendar__canvas {
    max-inline-size: 100%;
  }
}

.booking-reservations {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.booking-reservations--desktop {
  display: none;
}

.booking-reservations--mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.booking-form__section {
  margin-block-start: 1rem;
}

.booking-form__body {
  margin-block-start: 1.5rem;
}

@media (min-width: 768px) {
  .booking-form__body {
    grid-column: span 2 / span 2;
  }
}

.agenda-schedule-select__field {
  min-inline-size: 0;
}

@media (min-width: 640px) {
  .booking-reservations--desktop {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding-inline-end: 2rem;
  }

  .booking-reservations--mobile {
    display: none;
  }

  .agenda-schedule-select {
    flex-direction: row;
  }

  .agenda-schedule-select__field {
    flex: 1 1 0;
  }
}