.providers--expansible-list-item-first-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
}

.providers--expansible-list-item-first-row-text-container {
  width: calc(100% - 1.5rem - .75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.providers--expansible-list-item-first-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .25rem;
  width: 100%;

  .providers--expansible-list-item-first-row-name {
    font-size: var(--rem-13);
    line-height: var(--rem-21);
    letter-spacing: 0;
    font-variation-settings: 'wght' var(--text-medium);
    color: var(--text-action-neutral);
    max-width: 95%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
  }

  .chips--chip {
    margin-top: 2px;
  }

  &:has(.chips--chip) > .providers--expansible-list-item-first-row-name {
    max-width: calc(100% - .25rem - 2rem);
  }
}

.providers--expansible-list-item-first-row-subtitle {
  font-size: var(--rem-12);
  line-height: var(--rem-18);
  letter-spacing: 0;
  color: var(--text-information);
}

.providers--expansible-list-item-second-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
}

.providers--expansible-list-item-second-row-note {
  padding-left: 4.375rem;
  font-size: var(--rem-12);
  line-height: var(--rem-18);
  letter-spacing: 0;
  color: var(--text-information);
}

.providers--complete-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  &:not(:last-of-type) {
    padding-bottom: .75rem;
    border-bottom: solid 1px var(--border-secondary);
  }
}

.providers--complete-list-item-left {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;

  .providers--expansible-list-item-first-row-name {
    font-size: var(--rem-14);
    line-height: var(--rem-22);
  }

  .providers--expansible-list-item-first-row-header {
    gap: .5rem;
  }

  .providers--expansible-list-item-first-row-subtitle {
    font-size: var(--rem-13);
    line-height: var(--rem-21);
  }
}

.providers--complete-list-actions {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

.providers--expansible-list-item-second-row-note {
  padding-left: 4.375rem;
  font-size: var(--rem-12);
  line-height: var(--rem-18);
  letter-spacing: 0;
  color: var(--text-information);
}

.providers--complete-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  &:not(:last-of-type) {
    padding-bottom: .75rem;
    border-bottom: solid 1px var(--border-secondary);
  }
}

.providers--complete-list-item-left {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;

  .providers--expansible-list-item-first-row-name {
    font-size: var(--rem-14);
    line-height: var(--rem-22);
  }

  .providers--expansible-list-item-first-row-header {
    gap: .5rem;
  }

  .providers--expansible-list-item-first-row-subtitle {
    font-size: var(--rem-13);
    line-height: var(--rem-21);
  }
}

.providers--complete-list-actions {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

.providers--profile-tab-container {
  width: 100%;
  max-width: 900px;
}

/* Wraps the show page's name + duplicate banner + role/facility subtitle as a
   single Headers::HeaderComponent content slot. Needs its own flex/gap since
   .header--content's gap only spaces its own direct children, and this is the
   sole child once wrapped in HeaderDetailsComponent's own element. */
.providers--header-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

.providers--profile-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}

.providers--profile-field-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;

  &:has(.providers--profile-field-facilities) {
    align-items: flex-start;
  }

  @media screen and (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
}

.providers--profile-field-label {
  color: var(--text-label);
  font-variation-settings: 'wght' var(--text-medium);
  font-size: var(--rem-14);
  text-align: left;
  width: 200px;
  flex-shrink: 0;
  text-wrap: nowrap;
}

.providers--profile-field-value {
  color: var(--text-body);
  font-variation-settings: 'wght' var(--text-regular);
  text-align: left;
  font-size: var(--rem-14);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}

.providers--profile-field-facilities {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
}

/* Facility names link to the facility page but read as plain profile text — no
   underline or link colour. */
.providers--profile-field-facilities a {
  color: inherit;
  text-decoration: none;
}


.providers--facility-field {
  width: 100%;
  max-width: 40rem;
}


/* The "Edit details" modal: a fixed width matching the design (not the
   generic dialog's width: max-content) so it doesn't hug/balloon with its
   content, and its fields can read as definitively full-width. */
dialog.modals--main-modal.providers--edit-modal {
  width: 41.25rem;

  @media screen and (max-width: 576px) {
    width: 100dvw;
  }
}

.providers--new-page-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}

.providers--new-page-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.providers--form-fields-column {
  /* See the .providers--facility-field comment: max-width (not width: min())
     keeps this a definite clamp during the card's intrinsic-sizing pass. */
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .75rem;
}

.providers--form-field-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;

  @media screen and (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
}

/* The class's `display: flex` beats the UA `[hidden]` rule, so the Specialty row
   (hidden by role-specialty-visibility for administrative roles) needs this to
   actually disappear. */
.providers--form-field-row[hidden] {
  display: none;
}

.providers--form-field-label {
  width: 200px;
  flex-shrink: 0;
  color: var(--text-label);
  font-variation-settings: 'wght' var(--text-medium);
  font-size: var(--rem-14);
  text-align: left;

  @media screen and (max-width: 576px) {
    width: 100%;
  }
}

.providers--form-field-value {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;

  &.providers--form-field-value-split > input {
    flex: 1;
    min-width: 0;
  }
}

.providers--form-actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
}

/* The Edit details modal's Name row: first/middle/last side by side. */
.providers--edit-name-fields {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;

  input {
    flex: 1;
    min-width: 0;
  }
}