/* Team settings view (spec43). Mirrors the dashboard's card + table idiom. */

.team-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.team-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text-0);
}

.team-card p {
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 13px;
}

.team-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.team-form-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg-deep);
  color: var(--text-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 13px;
}

.team-subhead {
  margin: 16px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.team-table {
  display: flex;
  flex-direction: column;
}

.team-row {
  display: grid;
  /* Fixed action column (not `auto`): otherwise the action cell's width varies
     per row (an em-dash vs the wider "remove" button), which shifts the fr
     tracks and misaligns the role/usage values between rows. */
  grid-template-columns: 2fr 1fr 1fr 5.5rem;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
}

.team-row-head {
  border-top: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.team-cell {
  font-size: 13px;
  color: var(--text-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-cell-email {
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 6px;
}
.team-email-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-cell-muted { color: var(--text-3); }
.team-cell-action { text-align: right; }

.team-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius);
  font-size: 11px;
  background: var(--bg-3);
  color: var(--text-1);
}

.team-badge-owner {
  background: var(--blue-dim);
  color: var(--text-0);
}

.team-badge-pending {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}

/* Unpaid-team warning — shown to members (and the owner) when the team has no
   payment method yet. Yellow, advisory, not destructive. */
.team-unpaid-note {
  background: rgba(224, 179, 78, 0.08);
  border: 1px solid var(--yellow);
  border-radius: var(--radius);
  color: var(--text-0);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}