#patient-calendar {
  max-width: 1100px;
  margin-inline: auto;
  min-width: 0;
}

#patient-calendar .pc-content {
  display: grid;
  gap: 16px;
}

#patient-calendar .pc-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

#patient-calendar .pc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#patient-calendar .pc-fields label {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

#patient-calendar .pc-fields input,
#patient-calendar .pc-fields select {
  min-width: 0;
  width: 100%;
}

#patient-calendar .pc-picker h3 {
  margin: 16px 0 8px;
}

#patient-calendar .pc-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
}

#patient-calendar .pc-times button {
  margin: 0;
  padding-inline: 6px;
  font-variant-numeric: tabular-nums;
}

#patient-calendar .pc-times button[aria-pressed="true"] {
  background: #245943;
  border-color: #245943;
  color: #fff;
}

#patient-calendar .pc-review dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 8px 12px;
  margin: 0 0 14px;
}

#patient-calendar .pc-review dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#patient-calendar .pc-review button {
  width: 100%;
}

#patient-calendar .pc-agreement {
  margin-block: 12px;
}

#patient-calendar .pc-agreement p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#patient-calendar .pc-agreement label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#patient-calendar .pc-agreement input {
  flex: 0 0 auto;
  width: auto;
}

#patient-calendar .pc-appointment-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#patient-calendar .pc-appointment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding-block: 12px;
  border-top: 1px solid #c9d9d1;
}

#patient-calendar .pc-appointment h3,
#patient-calendar .pc-appointment p {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

#patient-calendar .pc-appointment-actions {
  grid-column: 1 / -1;
}

#patient-calendar .pc-status {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 8px;
  background: #ebf4ef;
  color: #214a37;
  font-size: .875rem;
}

#patient-calendar .pc-status[data-pc-status="parked"] {
  background: #fff5df;
  color: #654718;
}

#patient-calendar .pc-status[data-pc-status="cancelled"] {
  background: #f6f0f0;
  color: #633638;
}

#patient-calendar .pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#patient-calendar .pc-muted {
  color: #4a6056;
}

#patient-calendar .pc-notice:empty {
  display: none;
}

#patient-calendar .pc-notice:not(:empty) {
  padding: 8px 12px;
  border-radius: 8px;
  background: #edf6f0;
}

#patient-calendar .pc-notice.error:not(:empty) {
  background: #fbeeee;
  color: #7a3337;
}

@media (max-width: 720px) {
  #patient-calendar .pc-booking-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 410px) {
  #patient-calendar .pc-fields,
  #patient-calendar .pc-appointment {
    grid-template-columns: minmax(0, 1fr);
  }

  #patient-calendar .pc-status {
    justify-self: start;
  }
}