/* Schedule Set Up page: the schedule list, grouped by activity, and the schedule form. */

.schedule-list__title {
  margin-top: 0;
  font-size: 1.125rem;
}

.schedule-list__empty {
  color: var(--color-muted);
}

.schedule-list__groups,
.schedule-list__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The column header and every row share one grid and place their cells by area name, so the
   arrows sit over the marks at any width. The edit column is fixed, not auto, because the header
   has no edit link. The box is a container, so a narrow list can rearrange its rows (below). */
.schedule-list {
  container-type: inline-size;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.schedule-list__columns,
.schedule-list__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 1.75rem 1.75rem 2.25rem;
  grid-template-areas: "days times dropoff pickup edit";
  align-items: center;
  gap: 0 6px;
  padding: 4px 12px 4px 24px;
}

.schedule-list__columns {
  padding-top: 6px;
  padding-bottom: 0;
  color: var(--color-muted);
}

.schedule-list__columns > .tip {
  justify-self: center;
}

.schedule-list__columns > .tip:first-child { grid-area: dropoff; }
.schedule-list__columns > .tip:last-child { grid-area: pickup; }

/* The same size as the marks below, so each arrow is centred over its column. */
.schedule-list__column {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 3px;
}

.schedule-list__column:hover {
  color: var(--color-text);
}

.schedule-list__group + .schedule-list__group {
  border-top: 1px solid var(--color-border);
}

/* The activity name and its attendees; the icons wrap under a long name rather than squash it. */
.schedule-list__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 12px 4px;
  font-weight: 600;
}

.schedule-list__activity {
  flex: 1 1 8rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Days, times, the runs and the edit control on one line; how often and Ended go on a line under
   the times and runs. */
.schedule-list__row {
  grid-template-areas:
    "days times dropoff pickup edit"
    ". extras extras extras .";
}

.schedule-list__row:last-child {
  padding-bottom: 8px;
}

.schedule-list__days { grid-area: days; }

.schedule-list__times {
  grid-area: times;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.schedule-list__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  grid-area: extras;
}

.schedule-list__run--dropoff { grid-area: dropoff; }
.schedule-list__run--pickup { grid-area: pickup; }

.schedule-list__run {
  display: flex;
  justify-content: center;
}

/* A drop-off or pick-up, coloured like its Normal Week cap (journeys.css). */
.journey-mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 3px;
  font-size: 1rem;
}

.journey-mark--none {
  color: var(--color-muted);
}

.schedule-list__edit {
  grid-area: edit;
  justify-self: end;
}

/* Too narrow for one line, which needs 21rem (the list beside the form on a tablet or small
   laptop; a phone's full-width list still fits): the times go under the days, and the marks and
   edit control stay level with the days. */
@container (max-width: 21rem) {
  .schedule-list__columns,
  .schedule-list__row {
    grid-template-columns: 1fr 1.75rem 1.75rem 2.25rem;
    grid-template-areas: "days dropoff pickup edit";
    padding-left: 12px;
  }

  .schedule-list__row {
    grid-template-areas:
      "days dropoff pickup edit"
      "times . . ."
      "extras extras extras .";
  }
}

.schedule-list__extra {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.schedule-list__extra--ended {
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.schedule-list__edit {
  padding: 4px 8px;
  border-radius: var(--radius);
  color: var(--color-muted);
}

.schedule-list__edit:hover,
.schedule-list__edit:focus-visible {
  color: var(--color-text);
  background: var(--color-bg);
}

.schedule-form__title {
  margin-top: 0;
  font-size: 1.125rem;
}

.schedule-form__empty {
  color: var(--color-muted);
}

.schedule-form .field {
  margin-bottom: 8px;
}

/* Hidden by schedule_form_controller.js; .field sets no display, but say so plainly. */
.schedule-form .field[hidden],
.schedule-form__shortcuts[hidden] {
  display: none;
}

.schedule-form__days,
.schedule-form__run {
  margin: 0 0 16px;
  padding: 8px 12px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Side by side when there is room for both. */
.schedule-form__runs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 16px;
}

.schedule-form__run {
  min-width: 0;
}

.schedule-form__days legend,
.schedule-form__run legend {
  padding: 0 4px;
  font-weight: 600;
}

.schedule-form__day-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.schedule-form__day {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 2.75rem;
  cursor: pointer;
}

.schedule-form__shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}

.schedule-form__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.schedule-form__pair .field {
  flex: 1 1 140px;
}

/* An hour and a minute select side by side, with a colon between. */
.schedule-form__time {
  flex: 1 1 140px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.schedule-form__time legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

.schedule-form__time select {
  width: auto;
  min-width: 4.5rem;
  margin-bottom: 4px;
}

.schedule-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}