/* Calendar module (modules/calendar/views): a white box with the title, a bar of buttons, then the grid.
   Each day is a column of cells, one per quarter of an hour: white when bookable, hatched when not.
   Week view: every day side by side from 992px; below that, and in the day view, a strip of the week's days
   and one day's column. */

.calendar {
  display: grid;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
}

.calendar__sr {
  position: absolute;
  width: var(--border-1);
  height: var(--border-1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calendar__head {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.calendar__title {
  font-size: var(--fs-h3);
}

.calendar__dates {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

/* The bar: Availability on the left; the dates and Day | Week on the right. */
.calendar__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-surface);
  border-block: var(--border-1) solid var(--c-line);
}

/* The bar's and strip's buttons sit in a form each (they post, so no date in the address); the form adds no box. */
.calendar__go {
  display: contents;
}

.calendar__nav {
  display: flex;
  gap: var(--sp-1);
  margin-left: auto;
}

.calendar__modes {
  display: flex;
}

.calendar__button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--button-h-sm);
  padding-inline: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-1);
}

.calendar__button:hover {
  background-color: var(--c-ground);
}

.calendar__modes .calendar__button:first-child {
  border-radius: var(--radius-1) 0 0 var(--radius-1);
}

.calendar__modes .calendar__button:last-child {
  margin-left: calc(-1 * var(--border-1));
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
}

.calendar__button[aria-current="page"] {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
  border-color: var(--c-menu-button);
}

.calendar__caret {
  transition: transform var(--duration-fast) var(--ease);
}

[open] > .calendar__button .calendar__caret {
  transform: rotate(180deg);
}

/* The Availability drop-down: under the bar, the width of the box on phones, a panel from 576px. */
.calendar__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  display: none;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

[open] > .calendar__panel {
  display: grid;
}

.calendar__drop > summary {
  list-style: none; /* no triangle: the caret shows it opens */
  cursor: pointer;
}

.calendar__drop > summary::-webkit-details-marker {
  display: none; /* Safari: its own triangle ignores list-style */
}

@media (min-width: 576px) {
  .calendar__panel {
    left: var(--sp-4);
    right: auto;
    width: var(--calendar-panel-w);
  }
}

.calendar__panel-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-lead);
}

.calendar__panel-title span {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.calendar__add {
  display: grid;
  gap: var(--sp-3);
}

.calendar__times-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.calendar__add .button {
  justify-self: start;
}

.calendar__slots {
  display: grid;
  border-top: var(--border-1) solid var(--c-line);
}

.calendar__slot-day {
  display: grid;
  grid-template-columns: var(--sp-16) 1fr;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-bottom: var(--border-1) solid var(--c-line);
  font-size: var(--fs-small);
}

.calendar__slot-name {
  font-weight: 600;
}

.calendar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.calendar__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border: var(--border-1) solid var(--c-menu-button);
  border-radius: var(--radius-pill);
}

.calendar__chip:hover {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
}

.calendar__none {
  color: var(--c-text-muted);
}

/* The grid: the hours, then one column per day. */
.calendar__grid {
  display: grid;
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
}

.calendar__grid--week {
  display: none;
  grid-template-columns: var(--calendar-time-w) repeat(7, minmax(0, 1fr));
}

.calendar__grid--day {
  grid-template-columns: var(--calendar-time-w) minmax(0, 1fr);
}

@media (min-width: 992px) {
  .calendar__grid--week {
    display: grid;
  }

  .calendar__one--week {
    display: none;
  }
}

.calendar__corner,
.calendar__date {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--sp-1);
  height: var(--sp-10);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-text-muted);
}

.calendar__date strong {
  font-size: var(--fs-lead);
  color: var(--c-text);
}

.calendar__day--today .calendar__date strong {
  color: var(--c-menu-button);
}

.calendar__hours,
.calendar__cells {
  display: grid;
  grid-auto-rows: var(--calendar-row);
}

.calendar__hour {
  grid-row: span 4;
  align-self: start; /* its own height is one line, so the shift below is half a line */
  padding-right: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1;
  text-align: right;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%); /* the hour sits on its line */
}

.calendar__hour:first-child {
  transform: none;
}

.calendar__cells {
  border-left: var(--border-1) solid var(--c-line);
  border-bottom: var(--border-1) solid var(--c-line);
}

.calendar__day:last-child .calendar__cells {
  border-right: var(--border-1) solid var(--c-line);
}

/* Not bookable: thin diagonal lines, fixed to the screen so they run on unbroken from cell to cell. */
.calendar__cell {
  background-color: var(--c-surface);
  background-image: repeating-linear-gradient(45deg, var(--c-line) 0 var(--border-1), transparent var(--border-1) var(--sp-2));
  background-attachment: fixed;
}

.calendar__cell--open {
  background: var(--c-page);
}

.calendar__cell--hour {
  border-top: var(--border-1) solid var(--c-line);
}

/* Phones and the day view: the week's days as a strip, then one day. */
.calendar__strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4) 0;
}

.calendar__strip-day {
  display: grid;
  justify-items: center;
  padding-block: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-decoration: none;
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-1);
}

.calendar__strip-day strong {
  font-size: var(--fs-body);
  color: var(--c-text);
}

.calendar__strip-day--off {
  background-image: repeating-linear-gradient(45deg, var(--c-line) 0 var(--border-1), transparent var(--border-1) var(--sp-2));
}

.calendar__strip-day--today strong {
  color: var(--c-menu-button);
}

.calendar__strip-day[aria-current="date"] {
  color: var(--c-menu-button-text);
  background: var(--c-menu-button);
  border-color: var(--c-menu-button);
}

.calendar__strip-day[aria-current="date"] strong {
  color: var(--c-menu-button-text);
}

.calendar__dayhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.calendar__dayname {
  font-size: var(--fs-lead);
  color: var(--c-heading);
}

/* The key under the grid. */
.calendar__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  border-top: var(--border-1) solid var(--c-line);
}

.calendar__key > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.calendar__swatch {
  width: var(--sp-3);
  height: var(--sp-3);
  border: var(--border-1) solid var(--c-line);
  background-color: var(--c-surface);
  background-image: repeating-linear-gradient(45deg, var(--c-line) 0 var(--border-1), transparent var(--border-1) var(--sp-1));
}

.calendar__swatch--open {
  background: var(--c-page);
}

.calendar__swatch--booked {
  background: var(--c-accent);
  border-color: var(--c-menu-button);
}

/* Super admin: the list of consultants under their drop-down. */
.calendar__people {
  gap: 0;
  padding: var(--sp-2);
}

.calendar__person {
  text-align: start;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text);
  text-decoration: none;
  border-radius: var(--radius-1);
}

.calendar__person:hover {
  background-color: var(--c-ground);
}

.calendar__person[aria-current="page"] {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
}

/* A booking: a blue block over the quarters it takes (rows-1 is 15 minutes, rows-4 an hour). */
.calendar__booking {
  display: grid;
  align-content: start;
  gap: 0;
  padding: var(--sp-1) var(--sp-2);
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: var(--lh-heading);
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border-left: var(--sp-1) solid var(--c-menu-button);
}

.calendar__booking--short {
  display: flex;
  gap: var(--sp-1);
  padding-block: 0;
  white-space: nowrap;
}

.calendar__booking--short span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar__booking--rows-1 { grid-row: span 1; }
.calendar__booking--rows-2 { grid-row: span 2; }
.calendar__booking--rows-3 { grid-row: span 3; }
.calendar__booking--rows-4 { grid-row: span 4; }
.calendar__booking--rows-5 { grid-row: span 5; }
.calendar__booking--rows-6 { grid-row: span 6; }
.calendar__booking--rows-7 { grid-row: span 7; }
.calendar__booking--rows-8 { grid-row: span 8; }