/* Appointments Page Container Styles */

.appointments-page {
  min-height: calc(100vh - var(--navbar-height));
  background-color: var(--neutral-50);
}
/* The Calendar / Analytics switch. Only rendered for viewers with the analytics flag, so
   the page keeps its original spacing for everyone else. */
.appointments--page-tabs {
  margin-bottom: var(--rem-12);
}

/* No height or overflow of its own: unlike the calendar, analytics is an ordinary long
   document, and a scroller here would be a second one nested inside `.main-content-container`,
   so its bar renders inset from the window edge instead of at it. The page scrolls with
   every other page.

   The 1px inline padding is for the cards' focus rings and shadows: `.main-content-container`
   sets `overflow-y: auto`, which makes overflow-x compute to `auto` as well, so anything a
   card paints outside its own box on the left or right edge is clipped without it. */
.appointments--analytics-page {
  width: 100%;
  padding-inline: 1px;
}

.appointments--analytics-empty {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
  padding: var(--rem-24);
  background: var(--surface-primary);
  border-radius: var(--radius-md);
  color: var(--text-information);

  h2 {
    font-size: var(--rem-18);
    font-weight: var(--text-semibold);
    color: var(--text-heading);
  }
}

/* New-appointment modal: the slot clicked is outside the chosen physician's hours that day.
   Warning-toned rather than error-toned on purpose — booking outside someone's hours is
   allowed, and the banner states a fact rather than blocking anything. */
.appointments--slot-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);
  margin-bottom: var(--rem-16);
  padding: var(--rem-12);
  border: 1px solid var(--border-warning);
  border-radius: var(--radius-md);
  background-color: var(--surface-warning);
  /* The dialog is `width: max-content`, so an unwrapped line in here drags the whole modal
     out with it. Capped just inside the modal's 600px minimum so this banner can never be
     the thing that decides how wide the form is. */
  max-width: 34rem;
}

.appointments--slot-warning-text {
  /* A flex item will not shrink below its content without this, which would defeat the cap. */
  min-width: 0;
  font-size: var(--rem-13);
  color: var(--text-body);
}

/* Its own line: the fact on one, what to do about it on the next. */
.appointments--slot-warning-aside {
  display: block;
  color: var(--text-information);
}