/* The date and the time pickers: a month grid and a list of half hours,
   both ours rather than the browser's, so no locale can turn the time into
   AM/PM. Split from wizard.css to keep each file readable in one sitting. */

/* Placed in the viewport rather than inside the dialog: the dialog scrolls,
   and anything drawn inside it would be cut off at its edge. Opens upward from
   the field, which is where the room is. */
.popover {
  position: fixed;
  z-index: 60;
  background: var(--c-neutral-0);
  border: 1px solid var(--c-neutral-3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.popover-date {
  width: 320px;
}

.popover-time {
  width: 268px;
  max-height: 260px;
  overflow-y: auto;
}

.popover-title {
  font: var(--t-body-small-300);
  color: var(--c-neutral-9);
  margin: 0;
}

.popover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--c-neutral-9);
  font: var(--t-body-small-300);
  cursor: pointer;
}

.link-button:hover {
  color: var(--c-white);
}

.month {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

.month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: var(--t-h8-500);
  color: var(--c-white);
}

.month-arrows {
  display: flex;
  column-gap: 8px;
}

.month-arrows button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--c-neutral-3);
  background: transparent;
  color: var(--c-neutral-9);
  cursor: pointer;
}

.month-arrows button:hover {
  border-color: var(--c-neutral-7);
  color: var(--c-white);
}

.weekdays,
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.weekdays span {
  font: var(--t-body-small-500);
  color: var(--c-neutral-9);
  text-align: center;
}

.day,
.day-off,
.day-blank {
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--t-body-primary-300);
}

.day {
  border: 1px solid var(--c-neutral-3);
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
}

.day:hover {
  border-color: var(--c-neutral-7);
  background: var(--c-neutral-1);
}

/* A day nobody can pick has no box at all: it reads as absent rather than as
   a button that refuses. */
.day-off {
  color: var(--c-neutral-7);
}

.day-selected {
  border-color: transparent;
  background: var(--c-blue);
  font: var(--t-body-primary-500);
}

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.slot {
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--c-neutral-3);
  background: transparent;
  color: var(--c-white);
  font: var(--t-body-small-300);
  cursor: pointer;
}

.slot:hover {
  border-color: var(--c-neutral-7);
  background: var(--c-neutral-1);
}

.slot-selected {
  border-color: transparent;
  background: var(--c-blue);
}