/* Экран «Сотрудники» (Р-45): таблица членств и приглашений, смена роли в
 * строке, форма приглашения с пояснением прав ролей, ссылка для копирования;
 * экран принятия приглашения (auth-layout). Только токены из tokens.css. */

.team {
  max-width: 1120px;
}

/* Сотрудник: имя (+ метка «вы») и email второй строкой, с многоточием —
 * полный текст в title */
.team__col-name {
  width: 32%;
}

.team__col-role {
  width: 230px;
}

/* Объекты (Р-66): названия переносятся, кнопка «Изменить» — под ними */
.team__col-props {
  width: 200px;
}

.team-name {
  max-width: 0;
}

.team-name__line {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
}

.team-name__text,
.team-name__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-props__names {
  display: block;
}

/* Пустой приёмник модала «Новой ссылки» не добавляет зазор стопки */
#team_modal:empty {
  display: none;
}

.team-props .btn {
  margin-top: var(--space-1);
  margin-left: calc(-1 * var(--space-2-5));
}

/* Строка списка (.team-row): сотрудник или приглашение. Отключённый
 * сотрудник — приглушённая строка */
.team-row--disabled td {
  color: var(--text-muted);
}

/* Ячейка статуса (.team-status): бейдж и подпись «кто отключил /
 * пригласил» под ним */
.team-status__by {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

/* Смена роли: select и кнопка в одну строку */
.team-role-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: 0;
}

.team-role-form .team-role-form__select {
  width: auto;
  min-width: 140px;
  height: var(--control-height-sm);
}

/* Действия строки: button_to оборачивает кнопку в form */
.team-actions {
  text-align: right;
  white-space: nowrap;
}

.team-actions form {
  display: inline-flex;
  margin: 0;
}

.team-actions__note {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  white-space: normal;
}

/* Телефон: карточка сотрудника — имя и email целиком, роль с кнопкой и
 * объекты справа, действия — строкой справа */
@media (max-width: 767px) {
  .table.table--cards .team-name {
    max-width: none;
  }

  .table.table--cards .team-name__text,
  .table.table--cards .team-name__email {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .table.table--cards .team-status__by {
    margin-top: var(--space-0-5);
  }

  .table.table--cards .team-role-form {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .table.table--cards .team-props .btn {
    margin-left: 0;
  }

  .table.table--cards tbody td.team-actions {
    padding-left: 0;
  }
}

/* Роли: роль слева, права справа — строками с разделителями */
.team-roles {
  margin: 0;
  padding: var(--space-1) var(--space-5) var(--space-2);
}

.team-roles__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--kv-row-pad-y) 0;
  border-bottom: 1px solid var(--border-soft);
}

.team-roles__row:last-child {
  border-bottom: 0;
}

.team-roles__label {
  font-weight: 500;
}

.team-roles__value {
  margin: 0;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .team-roles {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .team-roles__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-0-5);
  }
}

/* Форма приглашения: роль — радио с пояснением прав одной строкой */
.team-invite__roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin: 0;
  padding: 0;
  border: 0;
}

.team-invite__role {
  display: grid;
  grid-template-columns: auto 120px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  cursor: pointer;
}

.team-invite__role-label {
  font-weight: 600;
}

.team-invite__role-hint {
  color: var(--text-secondary);
}

/* Объекты сотрудника (Р-66): режим «Все / Выбранные» и чекбоксы объектов
 * (модал строки и форма приглашения). Список виден только при «Выбранные»,
 * в приглашении блок скрыт при роли «Владелец» — CSS :has, без JS */
.team-props-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin: 0;
  padding: 0;
  border: 0;
}

.team-props-fields__mode {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-2);
  cursor: pointer;
}

.team-props-fields__label {
  font-weight: 600;
}

.team-props-fields__hint {
  grid-column: 2;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-secondary);
}

.team-props-fields__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding-left: var(--space-6);
}

.team-props-fields__option {
  cursor: pointer;
}

.team-props-fields:has(input[value="all"]:checked) .team-props-fields__list,
.team-invite:has(#invitation_role_owner:checked) .team-invite__props {
  display: none;
}

/* Ссылка приглашения: поле, отметка о письме и кнопки. На странице блок —
 * .team-link (текст и кнопки столбиком), в модале обёртки нет: текст — в
 * .modal__body, кнопки — в .modal__footer */
.team-link,
.team-link__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.team-link__body p {
  margin: 0;
}

.team-link__mail {
  color: var(--success);
}

.team-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Принятие приглашения: email — логин из приглашения, только чтение */
.invitation-accept__email {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .team-invite__role {
    grid-template-columns: auto 1fr;
  }

  .team-invite__role-hint {
    grid-column: 2;
  }
}

/* Касание: вариант объекта — строка 44; роль и режим объектов выше 44
 * за счёт подписи и так */
@media (pointer: coarse) {
  .team-props-fields__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
  }
}