/* The appointments settings tab: the physician mapping and the position list.
   Both live in the shared titled card, so the card and its title are not styled here —
   the content is decisions, not data, and earns no colour beyond the status words and
   the warnings. */
.appointments-settings--intro {
  margin: var(--rem-16) 0;
  font-size: var(--rem-13);
  color: var(--text-information);
  max-width: 48rem;
}

/* The card's own subtitle: the first line of its content, explaining what the decisions
   below actually change. */
.appointments-settings--card-note {
  margin-bottom: var(--rem-12);
  font-size: var(--rem-13);
  color: var(--text-information);
  max-width: 44rem;
}

.appointments-settings--table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rem-13);

  th, td {
    padding: var(--rem-8) var(--rem-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
  }

  thead th {
    font-weight: var(--text-medium);
    color: var(--text-information);
  }

  tbody th {
    font-weight: var(--text-medium);
    color: var(--text-body);
  }
}

/* Narrow enough that the checkbox reads as a control on the row, not a column of data. */
.appointments-settings--tick-column {
  width: var(--rem-48);
}

.appointments-settings--select {
  width: 100%;
  max-width: 22rem;
  padding: var(--rem-6) var(--rem-8);
  font-size: var(--rem-13);
  color: var(--text-body);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--input-radius);
}

.appointments-settings--muted {
  color: var(--text-information);
}

.appointments-settings--hint {
  display: block;
  margin-top: var(--rem-4);
  font-size: var(--rem-12);
  color: var(--text-information);

  &[data-state="warning"] {
    color: var(--text-warning);
  }
}

.appointments-settings--status {
  font-weight: var(--text-medium);

  &[data-state="counted"] {
    color: var(--text-success);
  }

  /* Not reviewed is the one status that is a to-do rather than a state. */
  &[data-state="not-reviewed"] {
    color: var(--text-warning);
  }
}

.appointments-settings--warning {
  padding: var(--rem-8) var(--rem-12);
  margin-bottom: var(--rem-12);
  font-size: var(--rem-13);
  border-radius: var(--radius-sm);
  color: var(--text-warning);
  background: var(--surface-warning);
  border: 1px solid var(--border-warning);
}

.appointments-settings--actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--rem-12);
}

.appointments-settings--details {
  margin-top: var(--rem-12);
  font-size: var(--rem-13);
  color: var(--text-information);
}

.appointments-settings--list {
  margin: var(--rem-8) 0 0 var(--rem-16);
  list-style: disc;
}