/* Members tab: totals, name filter, groups of member cards with role and situation
   tags, the owner/admin row menu and the invitation dialog. */

.communities-members {
  display: grid;
  gap: 24px;
}

.communities-members-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.communities-members-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-inline-end: auto;
  color: var(--theme-text-secondary);
  font-size: 15px;
  font-weight: 600;
}

.communities-members-filter {
  position: relative;
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  max-inline-size: 480px;
  color: var(--theme-text-secondary);
}

.communities-members-filter > svg {
  position: absolute;
  inset-inline-start: 12px;
  pointer-events: none;
}

.communities-members-filter .communities-input {
  padding-inline-start: 36px;
}

.communities-members-groups {
  display: grid;
  gap: 28px;
}

.communities-members-group {
  display: grid;
  gap: 12px;
}

.communities-members-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.communities-members-heading-count {
  padding: 1px 9px;
  border-radius: var(--theme-radius-full);
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.communities-members-group.is-requested .communities-members-heading-count {
  background: var(--site-primary-soft);
  color: var(--theme-color-primary);
}

.communities-members-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.communities-members-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-surface-raised);
  box-shadow: var(--theme-shadow-sm);
}

.communities-members-item.is-you {
  border-color: color-mix(in srgb, var(--theme-color-primary) 40%, var(--theme-border-subtle));
}

.communities-members-group.is-banned .communities-members-item {
  background: var(--theme-bg-secondary);
  box-shadow: none;
}

.communities-members-text {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.communities-members-name {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.communities-members-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.communities-members-tags:empty {
  display: none;
}

.communities-members-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-full);
  color: var(--theme-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.communities-members-tag.is-role-owner,
.communities-members-tag.is-role-admin,
.communities-members-tag.is-you {
  border-color: transparent;
  background: var(--site-primary-soft);
  color: var(--theme-color-primary);
}

.communities-members-tag.is-situation-requested {
  border-color: transparent;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #b45309;
}

.communities-members-tag.is-situation-invited {
  border-color: transparent;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #15803d;
}

.communities-members-tag.is-situation-banned {
  border-color: transparent;
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #b91c1c;
}

[data-theme='dark'] .communities-members-tag.is-situation-requested { color: #fbbf24; }
[data-theme='dark'] .communities-members-tag.is-situation-invited { color: #4ade80; }
[data-theme='dark'] .communities-members-tag.is-situation-banned { color: #f87171; }

/* Row menu */

.communities-members-menu {
  position: relative;
  flex: none;
}

.communities-members-menu.is-open {
  z-index: 5;
}

.communities-members-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  display: grid;
  min-inline-size: 220px;
  max-inline-size: min(300px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-md);
  background: var(--theme-surface-raised);
  box-shadow: var(--theme-shadow-md);
}

.communities-members-dropdown[hidden] {
  display: none;
}

.communities-members-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--theme-radius-sm);
  background: transparent;
  color: var(--theme-text-primary);
  font: inherit;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
}

.communities-members-option:hover,
.communities-members-option:focus-visible {
  background: var(--theme-bg-tertiary);
  outline: none;
}

.communities-members-option.is-danger {
  color: #dc2626;
}

[data-theme='dark'] .communities-members-option.is-danger {
  color: #f87171;
}

/* Invitation dialog */

.communities-members-invite {
  display: grid;
  gap: 14px;
}

.communities-members-invite .communities-members-filter {
  max-inline-size: none;
}

.communities-members-invite-results {
  min-block-size: 64px;
}

.communities-members-invite-hint {
  margin: 0;
  padding-block: 12px;
  color: var(--theme-text-secondary);
  font-size: 14px;
  text-align: center;
}

.communities-members-invite-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.communities-members-invite-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 4px;
  border-block-end: 1px solid var(--theme-border-subtle);
}

.communities-members-invite-item:last-child {
  border-block-end: 0;
}

.communities-members-invite-item .communities-members-name {
  flex: 1 1 140px;
  min-width: 0;
}

@media (max-width: 480px) {
  .communities-members-filter {
    flex-basis: 100%;
    max-inline-size: none;
  }

  .communities-members-bar > .communities-button {
    flex: 1 1 100%;
  }
}