/* ============================================================
   Team Management admin page.
   Reuses shared tokens/classes from global.css, admin.css,
   portfolio.css (.field, .btn-*, .spinner, .toast, .skeleton-row,
   .required-mark, .char-count, .dashboard-error, .badge,
   .image-upload, .image-preview-wrap, .image-placeholder),
   portfolio-page-content.css (.pc-card, .pc-form, .pc-save-bar,
   .pc-form-error), and testimonials.css (.ts-drawer*, .ts-empty,
   .ts-toggle-field, .ts-toggle-label, .ts-confirm-modal).
   Only rules specific to Team's own layout live here.
   ============================================================ */

.team-section-card {
  margin-bottom: 28px;
}

.team-members-topline {
  margin-top: 0;
}

.team-members-heading {
  font-size: 18px;
}

.team-toolbar {
  margin-bottom: 18px;
}

/* ---- Field group label (drawer form section dividers) ---- */
.field-group-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 22px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.field-group-label:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.team-drawer .field {
  margin-bottom: 16px;
}

/* ---- Team member list (admin) ---- */
.team-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-row {
  background: var(--white, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.team-row.is-draft {
  opacity: 0.85;
}

/* Fixed, controlled thumbnail — image dimensions never affect row/card
   height, matching the aspect-ratio + object-fit contract used on the
   public About page's .team-photo. */
.team-row-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--primary-light, #EEF0FF);
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-row-thumb .team-row-initials {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  opacity: 0.7;
}

.team-row-body {
  flex: 1;
  min-width: 0;
}

.team-row-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text, #1a1a2e);
}

.team-row-role {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.team-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.team-row-order {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 9px;
}

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

@media (max-width: 640px) {
  .team-row {
    flex-wrap: wrap;
  }
  .team-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}