/* admin-moderation.css — the /admin/moderation review queue: collapsible
   per-uploader groups around the shared files-table chrome (admin-shell.css),
   review-state badges, and the return-note modal's textarea. */

/* ── Per-uploader group ─────────────────────────────────────────────────────── */
.mod-group { margin-bottom: var(--space-5); }

/* Header = [group checkbox][collapse-toggle button]. The checkbox selects the
   uploader's whole awaiting-review batch and works while collapsed. */
.mod-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mod-group-check { flex: none; cursor: pointer; accent-color: var(--accent); }
.mod-group-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.mod-group-header:hover { background: var(--surface-hover); }
.mod-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.mod-group-chevron {
  flex: none;
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 120ms ease;
}
.mod-group.is-collapsed .mod-group-chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .mod-group-chevron { transition: none; } }

.mod-group-counts {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.mod-group-body { margin-top: var(--space-2); }
.mod-group.is-collapsed .mod-group-body { display: none; }

/* The review-state badge (.state-badge), the moderator's return note
   (.mod-note), and the .play-btn / .playing-row highlight now all live in
   file-view.css (loaded on this page with the component). */

/* ── Return-note modal textarea (app.css only styles input/select) ─────────── */
.edit-form textarea {
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}
.edit-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }