/*
 * C1 My Team for Directors (D-20 list, D-21 Change job role, team member record).
 *   .team-list       D-20 columns; cards on phones (the whole card opens the record)
 *   .team-tabs       Training | Policies tabs of the record (as A-21's .users-tabs, with counts)
 *   .team-training   record: assignments with certificate links   .team-policies   acknowledgments
 * The job role tag (.job-tag), the row menu button, the row ring and the D-21 dialog body
 * (.person-card, .user-form) are shared with the Admin people screens: pages/admin-users.css.
 */
@layer pages {
  /* --- D-20 ------------------------------------------------------------------------------ */
  .team-head__chip .icon { font-size: 13px; }

  .team-toolbar__spacer { flex: 1; }

  .team-list {
    --list-cols: minmax(0, 1.6fr) 180px 120px 150px 150px 40px;
  }

  .team-row__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .team-row__person .avatar { width: 34px; height: 34px; font-size: 12.5px; }
  .team-row__who { display: flex; flex-direction: column; min-width: 0; }
  .team-row__name,
  .team-row__email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-row__name { font-weight: 700; }
  .team-row__name a { color: inherit; text-decoration: none; }
  .team-row__name a:hover { color: inherit; text-decoration: underline; }
  .team-row__email { color: var(--color-neutral-700); font-size: 12.5px; }
  /* Shown where the Account column gives way (below 1200px). */
  .team-row__flag { display: none; align-self: flex-start; margin-top: 3px; }

  .team-row__job,
  .team-row__account,
  .team-row__policies,
  .team-row__training { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .team-row__label { color: var(--color-neutral-700); font-size: 12.5px; }
  .team-row__end { display: flex; justify-content: flex-start; }

  .team-note .notice__body a { font-weight: 400; white-space: nowrap; }

  /* --- Team member record ---------------------------------------------------------------- */
  .team-record__eyebrow { display: flex; }

  .team-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
  }
  .team-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;
  }
  .team-tabs__tab:hover { color: var(--color-text); }
  .team-tabs__tab.is-active {
    border-bottom-color: var(--color-blue);
    color: var(--color-text);
    font-weight: 700;
  }
  .team-tabs__count { color: var(--color-neutral-700); font-weight: 600; }

  .team-training { --list-cols: minmax(0, 2fr) 120px 120px 120px minmax(0, 1.4fr); }
  .team-policies { --list-cols: minmax(0, 2fr) 140px 130px 180px; }
  .team-training__row,
  .team-policies__row { min-height: 68px; }
  .team-record__date { white-space: nowrap; }
  /* A policy the Director cannot open: a neutral label instead of its title. */
  .team-policies__unavailable { color: var(--color-neutral-700); font-weight: 600; }

  .team-training__files {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
  }
  .team-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: var(--color-blue-deep);
    font-weight: 700;
    text-decoration: none;
  }
  .team-file:hover { color: var(--color-blue-deep); text-decoration: underline; }
  .team-file .icon { flex: none; font-size: 15px; }
  .team-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- Laptop / tablet ------------------------------------------------------------------- */
  @media (min-width: 1200px) and (max-width: 1439px) {
    .team-list { --list-cols: minmax(0, 1.6fr) 150px 112px 124px 124px 40px; }
  }

  /* Below 1200px the Account column gives way; someone who has not signed in yet is flagged
     beside their name instead. */
  @media (max-width: 1199px) {
    .team-list { --list-cols: minmax(0, 1fr) 140px 112px 112px 36px; }
    .team-row__account, .team-list .list-header > :nth-child(3) { display: none; }
    .team-row__flag { display: inline-flex; }
    /* The flag takes the email's line (the email is on the person's record). */
    .team-row__who:has(.team-row__flag) .team-row__email { display: none; }
    .team-toolbar__search { width: 200px; }
    .team-training { --list-cols: minmax(0, 1.6fr) 104px 104px 104px minmax(0, 1fr); }
    .team-policies { --list-cols: minmax(0, 1.4fr) 104px 104px 170px; }
  }

  /* --- Phones ---------------------------------------------------------------------------- */
  @media (max-width: 767px) {
    .team-list { gap: 10px; }
    .team-list .team-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      padding: 12px 14px;
    }
    .team-row__person { flex: 1 1 100%; gap: 12px; padding-right: 44px; }
    .team-row__person .avatar { width: 38px; height: 38px; font-size: 13px; }
    .team-row__who { gap: 2px; }
    .team-row__name { font-size: 15px; }
    .team-row__job { flex: 1 1 100%; }
    .team-row__policies.is-blank,
    .team-row__training.is-blank { display: none; }
    /* The whole card opens the record; the menu stays on top of it. */
    .team-row__name a::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }
    .team-row__end { position: absolute; top: 12px; right: 10px; z-index: 1; }
    .team-row__end .icon-btn { width: 44px; height: 44px; }
    .team-row .menu__panel { top: calc(100% + 4px); right: 0; }
    .team-toolbar__search { width: 100%; }

    .team-tabs { overflow-x: auto; scrollbar-width: none; }

    .team-training .list-row,
    .team-policies .list-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
    }
    .team-training .list-row__main,
    .team-policies .list-row__main { flex: 1 1 100%; }
    .team-record__date { color: var(--color-neutral-700); font-size: 12.5px; }
    .team-training__files { flex: 1 1 100%; }
  }

  /* Team member record: the signature image beside "Signed · date time". */
  .team-record__signature {
    max-width: 160px;
    max-height: 40px;
    object-fit: contain;
  }
}