/* ========================================
   Admin — Group members panel

   Structural styling for the Members section rendered into the group
   detail pane (#admin-col-detail-body) by as-core's group/members_panel.hbs
   + group/members_oob.hbs. Producer class names are fixed server-side;
   this file styles them by reusing the existing admin grammar:
     - rows  → mirror .user-device-row / .user-device-list (admin-bugs.css)
     - search → mirror #bugs-table .bugs-search
     - avatar → mirror .nav-avatar (eligtas.css)
     - icon button → mirror .bf-close (admin-bugs.css)
   Colours come from tokens only — no raw hex/rgba beyond the muted
   surface pattern already used across admin. Everything is scoped under
   .group-members-panel so the generic .btn-icon / .badge primitives the
   templates assume don't leak globally.
   ======================================== */

.group-members-panel {
  font-size: 0.82rem;
  color: var(--color-text);
}
.group-members-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.group-members-heading i { color: var(--color-text-secondary); }

/* ----------------------------------------------------------------
   Member list + rows — mirrors .user-device-list / .user-device-row
   ---------------------------------------------------------------- */
.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-4);
}
.member-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: rgba(var(--color-status-muted), 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.member-card:hover {
  background: rgba(var(--color-status-muted), 0.06);
  border-color: var(--color-border-light);
}
.member-card.member-suspended { opacity: 0.6; }

/* Avatar — mirror .nav-avatar (round, bordered). */
.member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.member-avatar-sm { width: 22px; height: 22px; }

.member-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role / status tags — the templates emit bare .badge .badge-sm
   .badge-primary / .badge-muted. Scoped here as small token-coloured
   pills rather than a global badge component (only consumer today). */
.group-members-panel .badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-status-muted), 0.12);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  white-space: nowrap;
}
.group-members-panel .badge-sm { font-size: 0.58rem; }
.group-members-panel .badge-primary {
  background: rgba(var(--color-status-info), 0.15);
  color: #93c5fd;
}
.group-members-panel .badge-muted {
  background: rgba(var(--color-status-muted), 0.1);
  color: var(--color-text-muted);
}

/* Icon buttons (add / remove) — mirror .bf-close grammar. */
.group-members-panel .btn-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.group-members-panel .member-remove:hover {
  background: rgba(var(--color-status-error), 0.12);
  border-color: rgba(var(--color-status-error), 0.35);
  color: var(--color-text);
}
.group-members-panel .member-add:hover {
  background: rgba(var(--color-status-info), 0.12);
  border-color: rgba(var(--color-status-info), 0.35);
  color: var(--color-text);
}

/* ----------------------------------------------------------------
   Add-member section + picker
   ---------------------------------------------------------------- */
.group-members-add { margin-top: var(--spacing-2); }
.group-members-subheading {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Search input — mirror #bugs-table .bugs-search. */
.member-picker-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.5rem;
  background: rgba(var(--color-status-muted), 0.06);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: 0.78rem;
}
.member-picker-search:focus {
  outline: none;
  border-color: rgba(var(--color-status-info), 0.4);
}

.member-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.member-picker-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}
.member-picker-item:hover { background: rgba(var(--color-status-muted), 0.05); }
.member-picker-item .member-name { font-size: 0.78rem; }

/* Teams "New ▾" type selector. The shared .kebab-dropdown anchors right:0,
   but this button hugs the left edge of the Teams toolbar, so a right-anchored
   menu grows leftward over the admin console's left menu column and reads as
   "hidden behind" it. Anchor it left (opens rightward into the content area)
   and lift it above the layout chrome. Scoped to .group-list-view so the
   incident status kebab keeps its right-anchored placement. */
.group-list-view .kebab-dropdown {
  left: 0;
  right: auto;
  z-index: 1100;
}