/*
 * C1 Users (A-21 People, A-22 Invite user, A-23 Access levels & job roles, access level page,
 * A-04 Edit user, the Change job role dialog, AM-02 phone list).
 *   .users-tabs        People | Access levels & job roles underline tabs (14px, active 700 with a 3px blue bar)
 *   .users-list        A-21 list columns; on phones each row becomes the AM-02 card
 *   .levels            A-23 access level cards        .job-roles   A-23 job roles table + add row
 *   .user-form         A-22 / A-04 dialog bodies: access level cards, Site warning, action rows
 *   .person-card       the person in the Change job role dialog (Admin and D-21)
 *   .user-actions      hairline action rows with an icon disc (A-04 cards; also Edit Site)
 */
@layer pages {
  /* Page head + tabs stay direct children of .main's 28px rhythm. */
  .users-head { display: contents; }

  .users-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
  }

  .users-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1.5px;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .users-tabs__tab:hover { color: var(--color-text); }
  .users-tabs__tab.is-active {
    border-bottom-color: var(--color-blue);
    color: var(--color-text);
    font-weight: 700;
  }

  /* --- A-21 filters ---------------------------------------------------------------------- */
  .users-toolbar__spacer { flex: 1; }
  .users-toolbar__search { width: 240px; }
  .users-toolbar .select-pill { font-size: 13.5px; }
  .users-toolbar .select-pill .icon { font-size: 15px; }

  /* --- A-21 list ------------------------------------------------------------------------- */
  .users-results { display: flex; flex-direction: column; gap: 16px; }

  .users-list {
    --list-cols: minmax(0, 1.7fr) 130px 170px 150px 130px 110px 40px;
  }

  .users-row__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .users-row__person .avatar { width: 34px; height: 34px; font-size: 12.5px; }
  .users-row__who { display: flex; flex-direction: column; min-width: 0; }

  .users-row__name,
  .users-row__email,
  .users-row__line,
  .users-row__site {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .users-row__name { font-weight: 700; }
  .users-row__name a { color: inherit; text-decoration: none; }
  .users-row__name a:hover { color: inherit; text-decoration: underline; }
  .users-row__email,
  .users-row__line { font-size: 12.5px; color: var(--color-neutral-700); }

  .users-row__access,
  .users-row__job,
  .users-row__status { display: flex; min-width: 0; }

  .users-row__last { color: var(--color-neutral-700); white-space: nowrap; }

  .users-row__end { display: flex; justify-content: flex-start; }

  /* Row menu button (A-21, D-20): 34px, clear on the row; open, it sits on the page tone in a blue ring. */
  :is(.users-row__more, .team-row__more).icon-btn { width: 34px; height: 34px; background: transparent; }
  :is(.users-row__more, .team-row__more).icon-btn:hover { background: var(--color-bg); }
  :is(.users-row__more, .team-row__more).icon-btn[aria-expanded="true"] {
    background: var(--color-bg);
    box-shadow: var(--ring);
    color: var(--color-text);
  }
  /* The 240px panel hangs from the button's lower left corner. */
  :is(.users-row, .team-row) .menu__panel {
    top: calc(100% - 2px);
    right: 30px;
    width: 240px;
    gap: 2px;
  }
  :is(.users-row, .team-row) .menu__panel--up { top: auto; bottom: calc(100% - 2px); }
  :is(.users-row, .team-row) .menu__sep { margin: 4px 10px; background: var(--color-divider); }

  /* Disabled: muted text that stays at WCAG AA (4.9:1 on the surface row) instead of the design's
     0.7 opacity, which takes the email, tags and the Disabled chip below 4.5:1. */
  .users-row--disabled { color: var(--color-neutral-700); }

  /* Row menu open (A-21, D-20): blue ring, and the row stays above the rows below its menu. */
  :is(.users-row, .team-row):has(.menu__panel:not([hidden])) {
    z-index: 3;
    box-shadow: var(--ring);
  }

  /* --- A-23 access levels ---------------------------------------------------------------- */
  .levels { display: flex; flex-direction: column; gap: 12px; }
  .levels__title,
  .job-roles__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .levels__cards { display: flex; gap: 14px; }

  .level-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .level-card__head { display: flex; align-items: center; gap: 10px; }
  .level-card__count {
    margin-left: auto;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .level-card__count:hover { color: var(--color-text); text-decoration: underline; }
  .level-card__scope { font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-700); }
  .level-card__facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .level-card__fact { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
  .level-card__fact .icon { flex: none; font-size: 15px; }
  .level-card__fact.is-off { color: var(--color-neutral-700); }

  /* --- A-23 job roles -------------------------------------------------------------------- */
  .job-roles { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
  .job-roles__head { display: flex; align-items: flex-end; gap: 12px; }
  .job-roles__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .job-roles__hint,
  .job-roles__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-700); }
  .job-roles__head label.btn { cursor: pointer; }
  .job-roles__table { display: flex; flex-direction: column; gap: 10px; }

  .job-roles-list {
    --list-cols: minmax(0, 1fr) 120px 160px;
    gap: 10px;
  }
  .job-role-row { min-height: 58px; }
  .job-role-row__name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
  .job-role-row__name.is-editing { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
  .job-role-row__form { margin: 0; }
  .job-role-row__form .input { border: 2px solid var(--color-blue); padding-left: 17.5px; }
  .job-role-row__form .input[aria-invalid="true"] { border-color: var(--color-err); }
  .job-role-row__end { gap: 4px; }
  .job-role-row__delete {
    display: flex;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-err-text);
    font-size: 16px;
  }
  button.job-role-row__delete:hover { background: var(--color-err-soft); }
  .job-role-row__delete--none { width: 32px; height: 32px; }

  .job-role-add {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 18px;
    border: 2px dashed var(--color-neutral-400);
    border-radius: var(--radius-row);
  }
  .job-role-add:focus-within { border-color: var(--color-blue); }
  .job-role-add.is-invalid { border-color: var(--color-err); }
  .job-role-add__icon { display: flex; flex: none; font-size: 17px; }
  .job-role-add__input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 14px;
  }
  .job-role-add__input::placeholder { color: var(--color-neutral-700); opacity: 1; }
  .job-role-add__input:focus { outline: none; }
  /* Until a name is typed the Add button rests in the neutral tone (A-23). */
  .job-role-add:has(.job-role-add__input:placeholder-shown) .job-role-add__button {
    background: var(--color-neutral-300);
    color: var(--color-neutral-700);
  }

  /* Access level page */
  .role-detail__eyebrow { display: flex; }
  .role-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  .role-detail__permissions {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .role-detail__permission {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--color-hairline);
    color: var(--color-neutral-700);
    font-size: 14px;
  }
  .role-detail__permission .icon { flex: none; font-size: 16px; }
  .role-detail__permission.is-granted { color: var(--color-text); font-weight: 600; }
  .role-detail__permission.is-granted .icon { color: var(--color-accent-2-700); }
  .role-detail__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }

  /* --- A-22 / A-04 / Change job role dialogs --------------------------------------------- */
  .user-dialog--invite .dialog { width: 700px; }

  .user-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .user-form__levels { gap: 8px; }

  .role-choices { gap: 10px; }
  .role-choice { flex-direction: column; gap: 8px; min-width: 0; }
  .role-choice__head { display: flex; align-items: center; gap: 10px; }
  .role-choice .choice__dot { margin-top: 0; }
  .role-choice__name { font-size: 15px; font-weight: 700; }
  .role-choice__icon {
    margin-left: auto;
    display: flex;
    color: var(--color-neutral-700);
    font-size: 17px;
  }
  .role-choice__summary { font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-700); }

  .user-form__manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-blue-deep);
    font-weight: 700;
    text-decoration: none;
  }
  .user-form__manage:hover { color: var(--color-blue-deep); text-decoration: underline; }
  .user-form__manage .icon { font-size: 14px; }

  /* A-04: the access level is shown, not edited; beside the Job role select it takes the select's height. */
  .user-form__access-value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 26px; }
  .user-form__access--beside .user-form__access-value { min-height: 48px; }

  /* A-04: the changed Site field is outlined in amber while the warning shows. */
  .user-form__site .input-wrap.is-changed .input { border-color: var(--color-warn); }
  .user-form__warning,
  .job-role-changes { display: contents; }

  .person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 20px;
    background: var(--color-surface);
  }
  .person-card .avatar { font-size: 12.5px; }
  .person-card__text { display: flex; flex-direction: column; min-width: 0; }
  .person-card__name { font-weight: 700; }
  .person-card__meta { font-size: 12.5px; color: var(--color-neutral-700); }

  .user-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
  }
  .user-actions__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--color-hairline);
  }
  .user-actions__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 17px;
  }
  .user-actions__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .user-actions__title { font-size: 14.5px; font-weight: 700; }
  .user-actions__hint { font-size: 13px; color: var(--color-neutral-700); }
  .user-actions__row--danger .user-actions__icon,
  .user-actions__row--danger .user-actions__title { color: var(--color-err-text); }
  .user-actions .btn--sm { height: 36px; }

  /* --- Laptop / tablet ------------------------------------------------------------------- */
  /* 1200–1439px (13" laptops): Last active gives way and the other columns tighten, so the person
     keeps most of the row. */
  @media (min-width: 1200px) and (max-width: 1439px) {
    .users-list { --list-cols: minmax(0, 1.6fr) 118px 150px 140px 124px 40px; }
    .users-row__last, .users-list .list-header > :nth-child(6) { display: none; }
  }

  /* Below 1200px seven columns do not fit: Site and Last active give way (the Site filter and the
     person's Edit dialog have them). */
  @media (max-width: 1199px) {
    .users-list { --list-cols: minmax(0, 1fr) 112px 136px 112px 36px; }
    .users-row__site, .users-list .list-header > :nth-child(4),
    .users-row__last, .users-list .list-header > :nth-child(6) { display: none; }
    .users-toolbar__search { width: 200px; }
  }

  @media (max-width: 1023px) {
    .role-detail { grid-template-columns: minmax(0, 1fr); }
    .levels__cards { flex-wrap: wrap; }
    .level-card { flex: 1 1 260px; }
    .job-roles-list { --list-cols: minmax(0, 1fr) 70px 110px 150px; }
  }

  /* --- Phones: AM-02 ---------------------------------------------------------------------- */
  @media (max-width: 767px) {
    /* AM-02: the search first (48px, full width), then the access pills in one scrolling row, then the filters. */
    .users-toolbar { gap: 14px 8px; }
    .users-toolbar__spacer { display: none; }
    .users-toolbar__search { order: -1; width: 100%; }
    .users-toolbar .pill-filters { flex: 1 1 100%; min-width: 0; }
    .users-results { gap: 14px; }
    .users-list { gap: 14px; }

    .users-list .users-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 64px;
      padding: 10px 14px;
    }
    .users-row__person { flex: 1; gap: 12px; }
    .users-row__person .avatar { width: 38px; height: 38px; font-size: 13px; }
    .users-row__who { gap: 2px; }
    .users-row__name { font-size: 15px; }
    .users-row__access,
    .users-row__job,
    .users-row__site,
    .users-row__last,
    .users-row__end { display: none; }
    /* The whole card opens A-04. */
    .users-row__name a::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }

    .user-dialog--invite .dialog { width: 100vw; }

    .levels__cards { flex-direction: column; }
    .level-card { flex: none; }
    .job-roles__head { flex-wrap: wrap; }
    .job-roles-list { gap: 10px; }
    .job-roles-list .job-role-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 12px;
    }
    .job-role-row__name { grid-column: 1; }
    .job-role-row__end { grid-column: 2; grid-row: 1 / span 2; }
    .job-role-row__people { grid-column: 1; font-size: 12.5px; }
  }
}