/* Shared live-status language for roster cards and council cards. */

.members-page .member-table td[data-label="Status"] {
  --status-rgb: 126, 148, 139;
  color: rgb(var(--status-rgb));
  font-weight: 600;
}

.members-page .member-table td.status-okay { --status-rgb: 101, 205, 143; }
.members-page .member-table td.status-traveling { --status-rgb: 86, 174, 218; }
.members-page .member-table td.status-abroad { --status-rgb: 218, 181, 91; }
.members-page .member-table td.status-hospital,
.members-page .member-table td.status-jail { --status-rgb: 218, 112, 106; }

.member-status-pill {
  width: max-content;
  max-width: 100%;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.34rem 0.62rem;
  border: 1px solid rgba(var(--status-rgb), 0.28);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--status-rgb), 0.1), rgba(var(--status-rgb), 0.035)),
    rgba(7, 10, 11, 0.8);
  color: rgb(var(--status-rgb));
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
  white-space: nowrap;
}

.member-status-dot {
  width: 0.44rem;
  height: 0.44rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--status-rgb), 0.08), 0 0 10px rgba(var(--status-rgb), 0.18);
}

.members-page .status-breakdown .status-count {
  --status-rgb: 142, 149, 145;
  min-height: 2rem;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: start;
  gap: 0.42rem;
  padding: 0.36rem 0.62rem;
  border: 1px solid rgba(var(--status-rgb), 0.22);
  border-radius: 7px;
  background: rgba(var(--status-rgb), 0.045);
  color: rgba(240, 236, 223, 0.68);
  font-size: 0.66rem;
  line-height: 1;
}

.members-page .status-count i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgb(var(--status-rgb));
  box-shadow: 0 0 0 3px rgba(var(--status-rgb), 0.07);
}

.members-page .status-count strong {
  color: rgb(var(--status-rgb));
  font-size: 0.72rem;
}

.members-page .status-count em {
  font-style: normal;
  font-weight: 500;
}

.members-page .status-count--okay { --status-rgb: 101, 205, 143; }
.members-page .status-count--traveling { --status-rgb: 86, 174, 218; }
.members-page .status-count--abroad { --status-rgb: 218, 181, 91; }
.members-page .status-count--hospital,
.members-page .status-count--jail { --status-rgb: 218, 112, 106; }

.profile-card .status-pill {
  --status-rgb: 142, 149, 145;
  min-height: 1.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  padding: 0.34rem 0.6rem;
  border: 1px solid rgba(var(--status-rgb), 0.27);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--status-rgb), 0.09), rgba(var(--status-rgb), 0.025)),
    rgba(7, 10, 11, 0.72);
  color: rgb(var(--status-rgb));
  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.profile-card .status-pill::before {
  width: 0.42rem;
  height: 0.42rem;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--status-rgb), 0.08), 0 0 10px rgba(var(--status-rgb), 0.2);
}

.profile-card .status-pill.online { --status-rgb: 101, 205, 143; color: rgb(var(--status-rgb)); }
.profile-card .status-pill.traveling { --status-rgb: 86, 174, 218; color: rgb(var(--status-rgb)); }
.profile-card .status-pill.idle { --status-rgb: 218, 181, 91; color: rgb(var(--status-rgb)); }
.profile-card .status-pill.offline { --status-rgb: 151, 157, 154; color: rgb(var(--status-rgb)); }
.profile-card .status-pill.error { --status-rgb: 218, 112, 106; color: rgb(var(--status-rgb)); }

@media (max-width: 600px) {
  .members-page .member-table td[data-label="Status"] {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .members-page .member-table td[data-label="Status"]::before {
    content: none !important;
  }

  .member-status-pill {
    min-height: 1.85rem;
    padding: 0.32rem 0.58rem;
    font-size: 0.65rem;
  }

  .members-page .status-breakdown .status-count {
    min-height: 2.1rem;
    padding-inline: 0.58rem;
  }
}