/* ============================================================
   roster.css
   Roster panel: staff cards, rank badges, status dots.
   ============================================================ */

.roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:16px;
}

.roster-card{
  background:linear-gradient(180deg, var(--walnut-700), var(--walnut-800));
  border:1px solid var(--walnut-500);
  border-radius:5px;
  padding:18px;
  position:relative;
  box-shadow:var(--shadow);
}

/* status dot, top-right — color set by [data-status] below */
.roster-card::before{
  content:"";
  position:absolute; top:14px; right:14px;
  width:9px; height:9px; border-radius:50%;
}
.roster-card[data-status="active"]::before{   background:var(--sage);  box-shadow:0 0 6px var(--sage); }
.roster-card[data-status="leave"]::before{    background:var(--brass); box-shadow:0 0 6px var(--brass); }
.roster-card[data-status="inactive"]::before{ background:var(--clay);  box-shadow:0 0 6px var(--clay); }

/* card is outlined while its row is open in the edit form */
.roster-card.editing{
  border-color:var(--brass);
  box-shadow:0 0 0 1px var(--brass), var(--shadow);
}

.rank-badge{
  display:inline-block;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:2px; margin-bottom:10px;
  color:var(--ink);
}
.rank-badge.founder{    background:var(--brass); }
.rank-badge.management{ background:#8fb4ff; }
.rank-badge.admin{      background:var(--parchment-dim); }
.rank-badge.moderator{  background:var(--sage); color:var(--ink); }
.rank-badge.support{    background:#5c6f8f; color:var(--parchment); }

.roster-card h3{
  font-family:var(--font-display); font-size:19px;
  margin:0 0 2px; letter-spacing:.02em;
}
.roster-card .discord{
  font-family:var(--font-mono); font-size:12px;
  color:var(--parchment-dim); margin-bottom:10px;
}

.roster-meta{ font-size:12.5px; color:var(--parchment-dim); line-height:1.7; }
.roster-meta b{ color:var(--parchment); font-weight:600; }

.roster-actions{ display:flex; gap:8px; margin-top:14px; }
.roster-actions .btn{ flex:1; font-size:11px; padding:8px 10px; }