/* ============================================================
   UCMS Provider Scheduler (Epic 1) - design prototype
   Preferences V2, screens 22 to 30. Source: FigJam box 172:6249
   on "PP Scheduler -Epic 1" (file 36bwdEVTMi9lxm4p4axy4A).

   Only what the Preferences family needs and nothing else already
   in the set: the settings card with its label-and-value rows, the
   appointment-types table, the calendar-provider list and the
   connected-calendar panel. Fields, selects, checkboxes, pills,
   message boxes, switches, caps and the drawer all come from
   calendar.css, availability.css and details.css unchanged.

   No colour literal is written here. Every value is a token from
   styles.css, which is the only file that states a colour.
   ============================================================ */

/* ---------- Settings card ---------- */
.pref {
  padding: var(--cds-padding-large) 0 0;
}

.pref__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-space-75) var(--cds-space-150);
  padding: 0 var(--cds-padding-large) var(--cds-padding-medium);
}

.pref__title {
  flex: 1;
  min-width: 0;
  font-size: var(--cds-txt-subhead-size);
  line-height: var(--cds-line-height-subhead);
  font-weight: var(--cds-font-weight-semibold);
  color: var(--wpo-navy);
}

/* The head note is the one line that carries a fact the rows cannot:
   that these settings are global. It is not a restatement of the
   heading, which is what the no-helper-text rule is about. */
.pref__head-note {
  flex: none;
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  color: var(--wpo-muted);
}

.pref__edit {
  flex: none;
}

.pref__body {
  padding: 0 var(--cds-padding-large) var(--cds-padding-large);
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-150);
}

/* ---------- Label and value rows ---------- */
.pref__rows {
  border-top: 1px solid var(--cds-neutral-100);
}

/* 2026-08-19, Figma final: a settings row is two columns. The label
   holds the left half, the value starts at the mid-point of the card
   and reads left-aligned, so every value on the card lines up on one
   edge. The hairline between rows is gone; the column edge carries
   the structure instead. */
.pref__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--cds-space-150);
  padding: var(--cds-padding-small) var(--cds-padding-large);
}

.pref__label {
  min-width: 0;
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  color: var(--wpo-ink-strong);
}

.pref__note {
  display: block;
  margin-top: 2px;
  font-size: var(--cds-txt-caption-size);
  line-height: 16px;
  color: var(--wpo-muted);
}

.pref__value {
  min-width: 0;
  text-align: left;
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  font-weight: var(--cds-font-weight-semibold);
  color: var(--wpo-ink-strong);
}

/* ---------- On and off, stated in words ----------
   Board crit 244:667: the table drew a green tick or a bare dash, and
   a dash is not a state. Both states are now a word on a tinted chip,
   so on and off read the same way in a table, in a provider row and
   in a settings row, and neither is carried by colour alone. */
.pref-state {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--cds-padding-small);
  border-radius: var(--cds-radius-xsmall);
  font-size: var(--cds-txt-caption-size);
  font-weight: var(--cds-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* The green tint is translucent, so on the green connected row it
   composited over a green ground and the 12px label fell to 4.18:1.
   The chip paints its tint over an opaque white instead, wherever it
   sits, which holds 4.56:1 everywhere. Same deviation, and the same
   fix, as .cds-badge--green in styles.css. */
.pref-state--on {
  background-color: var(--cds-neutral-0);
  background-image: linear-gradient(var(--cds-green-400-opacity-07), var(--cds-green-400-opacity-07));
  color: var(--cds-green-400);
}

.pref-state--off {
  background: var(--cds-neutral-50);
  color: var(--cds-neutral-350);
}

/* ---------- Session types table ---------- */
/* position:relative is load-bearing. The last column header carries a
   visually-hidden span, and .visually-hidden is position:absolute. With
   no positioned ancestor inside the scroller it escaped the scroller,
   projected to the table's full width in page coordinates and pushed the
   document 47px wide at 760. Contained here, it is clipped with
   everything else that scrolls. */
.pt-scroll {
  position: relative;
  overflow-x: auto;
  padding: 0 var(--cds-padding-large) var(--cds-padding-large);
}

/* The board's own appointment-types frame 172:4391 carries Referral Type
   and Languages, which the first build dropped when it took the column
   set of the Preferences V2 frame 370:3500 instead. Both are back, so
   the table now runs ten columns and the minimum widens with it. It
   still scrolls inside .pt-scroll rather than widening the page. */
.pt {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  text-align: left;
}

.pt thead th {
  padding: var(--cds-padding-small) var(--cds-space-75);
  background: var(--wpo-menu-surface);
  font-size: var(--cds-txt-caption-size);
  line-height: 16px;
  font-weight: var(--cds-font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cds-neutral-350);
  white-space: nowrap;
}

.pt thead th:first-child {
  border-radius: var(--cds-radius-xsmall) 0 0 var(--cds-radius-xsmall);
}

.pt thead th:last-child {
  border-radius: 0 var(--cds-radius-xsmall) var(--cds-radius-xsmall) 0;
}

/* Ten columns fit inside the card at 1440 with a 12px gutter and do not
   with a 16px one, and a table whose last column is clipped at rest reads
   as broken rather than as scrollable. It still scrolls below that. */
.pt tbody td,
.pt tbody th {
  padding: var(--cds-padding-medium) var(--cds-space-75);
  border-bottom: 1px solid var(--cds-neutral-100);
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  font-weight: var(--cds-font-weight-regular);
  color: var(--wpo-ink);
  vertical-align: middle;
}

.pt tbody tr:last-child td,
.pt tbody tr:last-child th {
  border-bottom: 0;
}

.pt__name {
  font-weight: var(--cds-font-weight-semibold);
  color: var(--wpo-ink-strong);
}

/* ---------- Row actions and the clickable row ----------
   Jaspal 244:674, agreed by Bryan at 320:477: the three-dot menu holding
   only Edit and Delete is replaced by the two icons themselves, and the
   row itself opens the type. The pointer affordance is on the row; the
   keyboard path is the Edit button, which is a real link and is where a
   Tab lands. Nothing is reachable by pointer alone. */
.pt__act {
  width: 96px;
  text-align: right;
  white-space: nowrap;
}

.pt__act .cds-icon-btn + .cds-icon-btn {
  margin-left: var(--cds-space-25);
}

.pt__row[data-row-href] {
  cursor: pointer;
}

.pt__row[data-row-href]:hover td,
.pt__row[data-row-href]:hover th {
  background: var(--cds-neutral-50);
}

/* Deleting is destructive, so its icon leaves the neutral ramp. The
   tint only appears under the pointer, so a resting row is not a row
   of warnings. */
.pt__del:hover {
  background: var(--cds-red-400-opacity-10);
  color: var(--cds-red-400);
}

/* ---------- Notification matrix ---------- */
.nx {
  min-width: 520px;
}

.nx thead th + th,
.nx tbody td {
  text-align: center;
  width: 96px;
}

.nx__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nx__box input {
  width: 18px;
  height: 18px;
  accent-color: var(--pp-primary);
  cursor: pointer;
}

/* ---------- Calendar providers ---------- */
/* 2026-08-19, Figma final: a provider is a plain row separated by a
   hairline, not a card. The connected one states itself with a chip
   and offers Disconnect on the same row, so no second panel is
   needed to say what is connected. */
.prov-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.prov {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cds-space-75) var(--cds-padding-medium);
  padding: var(--cds-padding-medium) 0;
}

.prov + .prov {
  border-top: 1px solid var(--cds-neutral-100);
}

.prov__text {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prov__name {
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  font-weight: var(--cds-font-weight-semibold);
  color: var(--wpo-ink-strong);
}

.prov__sub {
  font-size: var(--cds-txt-caption-size);
  line-height: 16px;
  color: var(--wpo-muted);
}

/* ---------- Connected calendar panel ---------- */
.conn {
  display: flex;
  flex-direction: column;
  gap: var(--cds-space-100);
  padding: var(--cds-padding-medium);
  border: 1px solid var(--cds-green-400);
  border-radius: var(--cds-radius-small);
  background: var(--cds-green-400-opacity-07);
}

.conn__head {
  display: flex;
  align-items: center;
  gap: var(--cds-space-50);
}

.conn__head svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--cds-green-400);
}

.conn__title {
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  font-weight: var(--cds-font-weight-semibold);
  color: var(--wpo-ink-strong);
}

.conn__meta {
  font-size: var(--cds-txt-body-small-size);
  line-height: 20px;
  color: var(--wpo-ink);
}

.conn__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-space-75);
}

/* ---------- Edit panels ----------
   2026-08-19, Figma final. The hairline under the panel title comes
   off: the title and the first field read as one block. The grey box
   that grouped the break control under Limit Consecutive Sessions
   comes off with it, so the revealed field sits on the panel itself. */
.pref-page ~ .drawer .drawer__head {
  border-bottom: 0;
}

.switch-row__detail--plain {
  padding: 0;
  background: none;
}

/* ---------- Session-type table ----------
   2026-08-19, Figma final: a leading icon column in front of the name,
   and the action column carries a visible header rather than a
   screen-reader-only one. */
.pt__name-cell {
  display: flex;
  align-items: center;
  gap: var(--cds-space-75);
}

.pt__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--pp-primary);
}

.pt__glyph svg {
  width: 20px;
  height: 20px;
}

/* Disconnect is the one destructive action on the page, so it is
   outlined in red rather than filled: it sits in a list of ordinary
   Connect buttons and must not out-shout them. */
.cds-btn--danger-outline {
  background: transparent;
  color: var(--cds-red-450);
  border-color: var(--cds-red-400);
}

.cds-btn--danger-outline:hover {
  background: var(--cds-red-400-opacity-10);
  color: var(--cds-red-450);
}

/* ---------- Language multi-select ----------
   2026-08-19, Figma final (Add New Type 380:5774 with the popover
   405:6651). The checkbox list becomes one field that states the
   languages already chosen and opens the full list on click. The
   list opens in normal flow under the field rather than as a
   floating popover, because the drawer body scrolls and a floating
   layer would be clipped at its edge. */
.ms-btn {
  display: flex;
  align-items: center;
  gap: var(--cds-space-75);
  width: 100%;
  height: var(--cds-field-height-small);
  padding: 0 var(--cds-padding-medium);
  border: 1px solid var(--cds-neutral-350);
  border-radius: var(--cds-radius-small);
  background: var(--cds-neutral-0);
  color: var(--cds-neutral-500);
  font-family: var(--cds-primary-font-family);
  font-size: var(--cds-txt-body-small-size);
  text-align: left;
  cursor: pointer;
}

.ms-btn__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-btn__chevron {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--cds-neutral-450);
}

.ms-btn__chevron svg {
  width: 16px;
  height: 16px;
}

.ms-btn[aria-expanded="true"] .ms-btn__chevron {
  transform: rotate(180deg);
}

.ms-panel {
  margin-top: var(--cds-space-50);
  padding: var(--cds-padding-small) var(--cds-padding-medium);
  border: 1px solid var(--cds-neutral-100);
  border-radius: var(--cds-radius-small);
  background: var(--cds-neutral-0);
}

/* ---------- Notification delivery fields ----------
   2026-08-19, Bryan's Aug 14 note: each channel states where it is
   delivered. The value is pre-filled from the account rather than
   left as an empty placeholder. */
.switch-row__field {
  margin-top: var(--cds-space-75);
  max-width: 320px;
}

/* ---------- Narrow widths ---------- */
@media (max-width: 720px) {
  .pref__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cds-space-25);
  }

  .pref__head,
  .pref__body,
  .pt-scroll {
    padding-left: var(--cds-padding-medium);
    padding-right: var(--cds-padding-medium);
  }
}