.users-teams-page {
  margin-top: var(--space-6);
}

.users-teams-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
  gap: var(--space-4);
  align-items: start;
}

.users-teams-section {
  min-width: 0;
}

.users-teams-section h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.users-teams-section-header,
.team-list-item,
.team-member-item,
.users-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.section-count,
.users-teams-empty,
.team-select span,
.users-list-identity span,
.team-member-details span,
.users-list-created {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.team-create-form,
.team-add-form,
.function-create-form {
  display: flex;
  align-items: end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.users-teams-field {
  display: grid;
  flex: 1;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.users-teams-field input,
.users-teams-field select,
.team-list-item input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-regular);
}

.team-list,
.team-member-list,
.users-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.team-list-item,
.team-member-item,
.users-list-item {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.team-select {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-height: 44px;
  border: 0;
  background: transparent;
  padding: var(--space-1);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.team-select[aria-pressed="true"] strong {
  color: var(--color-brand-primary);
}

.button--small {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.team-member-details,
.users-list-identity {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.role-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-50);
  padding: 0 var(--space-2);
  color: var(--color-neutral-700);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.role-badge[data-role="ADMIN"] {
  border-color: var(--color-info-border);
  background: var(--color-info-bg);
  color: var(--color-info);
}

.users-list-section {
  grid-column: 1 / -1;
}

.users-list-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(180px, 0.8fr);
}

.users-list-teams {
  display: grid;
  gap: var(--space-1);
  color: var(--color-neutral-700);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.users-teams-explainer {
  max-width: 80ch;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.profile-editor {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.profile-editor summary {
  min-height: 44px;
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.profile-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.profile-editor-form input:not([type="checkbox"]),
.profile-editor-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font: inherit;
}

.profile-functions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.profile-functions legend {
  padding: 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.function-choice {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  cursor: pointer;
}

.profile-editor-form > button {
  justify-self: start;
}

.users-teams-status {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
}

.users-teams-status[data-state="error"] {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.users-teams-status[data-state="success"] {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success);
}

@media (max-width: 900px) {
  .users-teams-layout {
    grid-template-columns: 1fr;
  }

  .users-list-section {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .team-create-form,
  .team-add-form,
  .function-create-form {
    align-items: stretch;
    flex-direction: column;
  }

  .users-list-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .users-list-teams {
    grid-column: 1 / -1;
  }

  .team-member-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-editor-form {
    grid-template-columns: minmax(0, 1fr);
  }
}