/* ============================================================
   GWM V2 — Roster CSS
   Table · Toolbar · Status Toggle · Zone Chip · Member Modal
   ============================================================ */

/* ── TOOLBAR ─────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.toolbar .search { flex: 1; min-width: 180px; }

/* ── ROSTER TABLE ────────────────────────────────────────── */
.rtable-wrap {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); overflow: hidden;
}
.rtable {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.rtable thead tr {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-soft);
}
.rtable th {
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 500; color: var(--fg-3);
  letter-spacing: 0.02em; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: color .12s;
}
.rtable th:hover { color: var(--fg-2); }
.rtable th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
.rtable th.sort-desc::after { content: ' ↓'; color: var(--accent); }
.rtable th:last-child { cursor: default; }

.rtable tbody tr {
  border-bottom: 1px solid var(--line-soft);
  transition: background .1s;
}
.rtable tbody tr:last-child { border-bottom: none; }
.rtable tbody tr:hover { background: var(--panel-2); }

.rtable td {
  padding: 10px 14px; vertical-align: middle;
}
.rtable td:last-child { text-align: right; padding-right: 10px; }

/* Name cell */
.nmcell {
  display: flex; align-items: center; gap: 8px;
}
.nmcell .nm { font-weight: 500; color: var(--fg); }
.nmcell .note-inline { font-size: 11px; color: var(--fg-3); font-style: italic; }
.nmcell .warn-ico { color: var(--late); display: flex; align-items: center; }
.nmcell .warn-ico svg { width: 14px; height: 14px; }

/* CP cell */
.cpcell {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; font-weight: 500; color: var(--gold);
}

/* Misses cell */
.misscell { font-family: 'Geist Mono', monospace; font-size: 12px; }
.misscell.warn { color: var(--late); font-weight: 600; }

/* Discord cell */
.discord-cell { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--fg-3); }

/* Zone chip */
.zone-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500;
  background: color-mix(in oklch, var(--zc, var(--accent)) 14%, var(--panel-2));
  color: color-mix(in oklch, var(--zc, var(--accent)) 65%, var(--fg));
  border: 1px solid color-mix(in oklch, var(--zc, var(--accent)) 28%, transparent);
  white-space: nowrap;
}
.zone-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--zc, var(--accent)); flex: none;
}

/* ── STATUS TOGGLE ───────────────────────────────────────── */
.status-toggle {
  display: inline-flex; background: var(--bg-deep);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 2px; gap: 1px;
}
.status-toggle button {
  padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  color: var(--fg-3); transition: all .12s; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 4px;
}
.status-toggle button:hover { color: var(--fg-2); background: var(--panel-2); }
.status-toggle button.on { color: var(--fg); background: var(--panel-2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.status-toggle button.on.ready  { color: var(--ready); }
.status-toggle button.on.late   { color: var(--late); }
.status-toggle button.on.absent { color: var(--absent); }
.status-toggle button.on.leave  { color: var(--leave); }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.roster-empty {
  text-align: center; padding: 60px 20px;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.roster-empty .empty-ico {
  width: 52px; height: 52px; border-radius: var(--r);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.roster-empty .empty-ico svg { width: 24px; height: 24px; color: var(--fg-3); }
.roster-empty h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.roster-empty p  { font-size: 13px; color: var(--fg-3); max-width: 300px; margin: 0 auto 20px; line-height: 1.6; }

/* ── MEMBER MODAL ────────────────────────────────────────── */
.discord-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-deep); border: 1px solid var(--line-soft);
  margin-top: 4px;
}
.discord-link-row svg { width: 16px; height: 16px; color: color-mix(in oklch, #5865f2 80%, var(--fg)); flex: none; }
.discord-link-row .linked { font-size: 13px; font-weight: 500; color: var(--fg); }
.discord-link-row .unlinked { font-size: 12px; color: var(--fg-3); }

/* CP input with live preview */
.cp-preview {
  font-family: 'Geist Mono', monospace; font-size: 13px;
  color: var(--gold); font-weight: 500; margin-top: 5px;
}

/* ── ROSTER SUMMARY BAR ──────────────────────────────────── */
.roster-summary {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); margin-bottom: 14px; flex-wrap: wrap;
}
.roster-summary .rs-item {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.roster-summary .rs-val {
  font-family: 'Geist Mono', monospace; font-weight: 600; font-size: 14px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .rtable td.hide-sm, .rtable th.hide-sm { display: none; }
}
@media (max-width: 640px) {
  .rtable td.hide-xs, .rtable th.hide-xs { display: none; }
  .toolbar { gap: 6px; }
}