/*
 * Admin-only CSS — loaded after `bitgrader-design.css` (tokens + shared components from
 * @bitgrader/design) and `base/reset.css`. Do not duplicate stack/cluster/sidebar/shell here;
 * they live in the shared bundle.
 *
 * Section tags:
 *   [ADMIN]   — Admin app policy and screens only
 *   [SHIM]    — helpers not yet in @bitgrader/design (candidate to upstream later)
 */

/* [ADMIN] Surface hierarchy: page uses --color-surface-page (canvas). The next level (cards, stat cards,
   login shell) should read *inset* — darker than the canvas — using the same tokens as
   `.card--sunken` / empty states in @bitgrader/design.

   Borders: `@bitgrader/design` sunken skins use `--color-border-secondary`; BitGrader Web also
   tightens sunken/inset rims in dark contexts to `--color-border` — see games-list.css
   (e.g. `.game-sidebar__collection-dialog-stack` under `html[data-theme="dark"]`). Mirror that here
   so Admin matches the Web app shell, while light theme keeps softer secondary rims. */
.card,
.stat-card,
.login-card,
.profile-collection-card,
.profile-collections-grid__card {
  background: var(--color-surface-sunken);
  border: var(--border-width-default) solid var(--color-border-secondary);
}

html:not([data-theme]) :where(.card, .stat-card, .login-card, .profile-collection-card, .profile-collections-grid__card),
html[data-theme="dark"] :where(.card, .stat-card, .login-card, .profile-collection-card, .profile-collections-grid__card) {
  border-color: var(--color-border);
}

/* [ADMIN] Main vertical rhythm: single-root pages (e.g. one Stimulus wrapper) need inner section spacing. */
.app-main__body > *:only-child > * + * {
  margin-top: var(--space-md);
}

/* When the yield root is already a .stack, sibling gaps come from --stack-space — do not add margin-top
   or spacing doubles (gap-md + margin-md) vs global stack tokens. */
.app-main__body > *:only-child.stack > * + * {
  margin-top: 0;
}

/* [SHIM] Helper used in many ERBs; not in @bitgrader/design */
.text-muted {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

/* [ADMIN] Public website links in tables */
.app-external-link {
  color: var(--color-accent-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.app-external-link:hover {
  color: var(--color-accent-action);
}

.app-external-link:visited {
  color: var(--color-accent-highlight);
}

/* button_to in header: strip UA button chrome so .app-nav__link matches link styling */
form.button_to {
  display: inline-flex;
  margin: 0;
}

form.button_to .app-nav__link {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* [ADMIN] Center score column where game_score_pill is used */
.data-table th.data-table__col--score,
.data-table td.data-table__col--score {
  text-align: center;
  vertical-align: middle;
}

/* [ADMIN] Full-width tables: non-last columns stay as narrow as content; last column fills remaining width */
.data-table--last-col-fill {
  width: 100%;
  table-layout: auto;
}

.data-table--last-col-fill > thead > tr > th:not(:last-child),
.data-table--last-col-fill > tbody > tr > td:not(:last-child) {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.data-table--last-col-fill > thead > tr > th:last-child,
.data-table--last-col-fill > tbody > tr > td:last-child {
  width: auto;
}

/* Collections index: compact leading columns + shrink-wrap View; Description absorbs remaining width */
.collections-data-table--desc-fill {
  width: 100%;
  table-layout: auto;
}

.collections-data-table--desc-fill > thead > tr > th:not(.collections__desc-col):not(.collections__view-col),
.collections-data-table--desc-fill > tbody > tr > td:not(.collections__desc-cell):not(.collections__view-cell) {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.collections-data-table--desc-fill > thead > tr > th.collections__desc-col,
.collections-data-table--desc-fill > tbody > tr > td.collections__desc-cell {
  width: auto;
  min-width: 12rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: middle;
}

.collections-data-table--desc-fill > thead > tr > th.collections__view-col,
.collections-data-table--desc-fill > tbody > tr > td.collections__view-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

/* Petitions index: same column-width pattern as Collections (Description fills; Review shrink-wraps) */
.petitions-data-table--desc-fill {
  width: 100%;
  table-layout: auto;
}

.petitions-data-table--desc-fill > thead > tr > th:not(.petitions__desc-col):not(.petitions__review-col),
.petitions-data-table--desc-fill > tbody > tr > td:not(.petitions__desc-cell):not(.petitions__review-cell) {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.petitions-data-table--desc-fill > thead > tr > th.petitions__desc-col,
.petitions-data-table--desc-fill > tbody > tr > td.petitions__desc-cell {
  width: auto;
  min-width: 12rem;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: middle;
}

.petitions-data-table--desc-fill > thead > tr > th.petitions__review-col,
.petitions-data-table--desc-fill > tbody > tr > td.petitions__review-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.petitions__actions-cluster {
  flex-wrap: nowrap;
  align-items: center;
}

.petitions__review-cell form.inline-form {
  margin: 0;
}

.petitions__action-button {
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.petition-reject-dialog {
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--space-lg);
  max-width: min(32rem, calc(100vw - 2rem));
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.petition-reject-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.petition-reject-dialog__help {
  margin: 0;
  font-size: var(--font-size-caption);
}

/* [ADMIN] Read-only content blocks */
.comment-body,
.petition-body {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
}

.code-block {
  overflow-x: auto;
  padding: var(--space-md);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  white-space: pre;
}

/* [ADMIN] Auth + QR */
.auth-note,
.manual-entry {
  color: var(--color-muted);
}

.auth-note {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-caption);
}

/* RQRCode SVG: force a white plane so scanners work in dark mode. */
.qr-code {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: var(--space-md) auto;
  padding: var(--space-sm);
  border-radius: var(--radius-container);
  background: #fff;
}

.qr-code svg {
  display: block;
  border-radius: var(--radius-sm);
}

.manual-entry {
  margin: var(--space-sm) 0;
  font-size: var(--font-size-caption);
}

.manual-entry code {
  word-break: break-all;
}

/* [ADMIN] Dashboard layout (stat cards use shared .stat-card) */
.stat-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
}

.stat-grid .stat-card {
  min-width: 0;
  text-align: center;
  justify-content: center;
}

/* Dashboard stat tiles are `<a class="stat-card">` — match card chrome, avoid default link styling */
.stat-grid a.stat-card {
  text-decoration: none;
  color: inherit;
}
.stat-grid a.stat-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.stat-card.stat-card--alert {
  border-color: var(--color-accent-warning);
}

.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.dashboard-col {
  min-width: 0;
}

/* Six equal panels under quick stats (2×3, then 1 col on small screens) */
.dashboard-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.dashboard-panels .dashboard-col {
  min-width: 0;
}

/* Full-width stack (submissions) + 2×2 panel grid; gap from stat cluster comes from parent
   `.app-main__body.stack.stack--gap-md` — do not add margin-top here or spacing doubles. */
.dashboard-body {
  width: 100%;
}

/* Recent Submissions: spans full main column width (not a grid cell) */
.dashboard-submissions {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Dashboard: first columns stay content-sized; last column fills the card */
.dashboard-panels .data-table,
.dashboard-submissions .data-table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

.dashboard-panels .table-wrap,
.dashboard-submissions .table-wrap {
  width: 100%;
  max-width: 100%;
}

.dashboard-panels .data-table th:not(:last-child),
.dashboard-panels .data-table td:not(:last-child),
.dashboard-submissions .data-table th:not(:last-child),
.dashboard-submissions .data-table td:not(:last-child) {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.dashboard-panels .data-table th:last-child,
.dashboard-panels .data-table td:last-child,
.dashboard-submissions .data-table th:last-child,
.dashboard-submissions .data-table td:last-child {
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
}

/* [ADMIN] Key/value pairs on show pages */
.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2xs) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-caption);
}

.detail-list dt {
  align-self: baseline;
  color: var(--color-muted);
  font-weight: var(--font-weight-semibold);
}

.detail-list dd {
  word-break: break-word;
}

/* [ADMIN] Workflow status hues */
.status-pending { background: var(--color-accent-warning); color: var(--color-text-on-accent); }
.status-approved { background: var(--color-accent-success); color: var(--color-text-on-accent); }
.status-rejected { background: var(--color-accent-danger); color: var(--color-text-on-accent); }

/* [ADMIN] Filter/tab strip */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tab {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  text-decoration: none;
}

.tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}

.tab--active {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
}

.tab--active:hover {
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
  filter: brightness(1.08);
}

/* [SHIM] Kaminari pagination — not in @bitgrader/design */
nav.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  font-size: var(--font-size-caption);
}

nav.pagination a,
nav.pagination em.current {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

nav.pagination a:hover {
  border-color: var(--color-accent-border);
  color: var(--color-accent-action);
}

nav.pagination em.current {
  border-color: var(--color-accent-border);
  background: var(--color-surface-accent);
  font-style: normal;
}

nav.pagination .prev,
nav.pagination .next {
  color: var(--color-muted);
}

/* [ADMIN] Scroll helpers where .table-wrap isn’t wrapped */
.table-scroll-wrapper,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* [ADMIN] Search / filter bars — match bitgrader-web game thread composer (form-input + square send) */
.admin-search-bar {
  --admin-search-row-height: var(--size-touch-min);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-xs);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.admin-search-bar--grow {
  flex: 1 1 18rem;
  min-width: min(100%, 12rem);
}

.page-header > form:has(.admin-search-bar),
.page-header .cluster:has(.admin-search-bar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
}

.page-header > form:has(.admin-search-bar) > .admin-search-bar,
.page-header .cluster:has(.admin-search-bar) > .admin-search-bar,
.igdb-search-form > .admin-search-bar,
.cluster:has(> .admin-search-bar) > .admin-search-bar {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

.admin-search-bar .form-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--admin-search-row-height);
  min-height: var(--admin-search-row-height);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
  font-size: var(--font-size-caption);
  line-height: 1;
  box-sizing: border-box;
}

/* Select: use background-color only (never `background:`) so games-list / .form-select chevrons stay visible */
.admin-search-bar .form-select,
.admin-search-bar .games-search__select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--admin-search-row-height);
  min-height: var(--admin-search-row-height);
  padding-block: 0;
  padding-inline-start: var(--space-sm);
  padding-inline-end: var(--select-padding-inline-end);
  border-radius: var(--radius-container);
  background-color: var(--color-surface-raised);
  font-size: var(--font-size-caption);
  line-height: 1;
  box-sizing: border-box;
}

.admin-search-bar .form-input::placeholder {
  color: var(--color-muted);
}

.admin-search-bar__submit {
  flex: 0 0 var(--admin-search-row-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-search-row-height);
  min-width: var(--admin-search-row-height);
  height: var(--admin-search-row-height);
  padding: 0;
  margin: 0;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-active);
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--duration-interaction) var(--ease-default),
    border-color var(--duration-interaction) var(--ease-default);
}

.admin-search-bar__submit:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.admin-search-bar__submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-inset-offset);
  box-shadow: none;
}

.admin-search-bar__icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

/*
 * [SHIM] Native <select> chevrons — same rules + SVG as bitgrader-web
 * `web/app/assets/stylesheets/blocks/games-list.css` (class `games-search__select` and peers).
 * `.form-select` is included so other admin screens keep parity without duplicating class names.
 */
.games-search__select {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  color: var(--color-text);
  font: inherit;
}

.games-search__select:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-inset-offset);
  border-color: var(--color-focus-ring);
  box-shadow: none;
}

/* games-list.css — Native selects (chevron: fill must match --color-text per theme) */
.games-search__select,
.game-scores__select,
.game-comments__select,
select.game-sidebar__dialog-input,
select.login-card__input,
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6e9ef' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--select-chevron-inset-end) center;
  background-size: var(--select-chevron-size);
  padding-inline-end: var(--select-padding-inline-end);
}

html[data-theme="light"] .games-search__select,
html[data-theme="light"] .game-scores__select,
html[data-theme="light"] .game-comments__select,
html[data-theme="light"] select.game-sidebar__dialog-input,
html[data-theme="light"] select.login-card__input,
html[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23171c26' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.games-search__select::-ms-expand,
.game-scores__select::-ms-expand,
.game-comments__select::-ms-expand,
select.game-sidebar__dialog-input::-ms-expand,
select.login-card__input::-ms-expand,
.form-select::-ms-expand {
  display: none;
}

/* Submissions: nowrap on fixed columns; top-align Comment body so wrapped text reads normally; middle-align
   other cells (!important beats UA/baseline quirks next to a tall last column in WebKit/Safari). */
.submissions-page .data-table thead th {
  white-space: nowrap;
  vertical-align: middle;
}

.submissions-page .data-table tbody td:not(:last-child) {
  white-space: nowrap;
  vertical-align: middle !important;
}

.submissions-page .data-table tbody td:last-child {
  white-space: pre-line;
  word-break: break-word;
  vertical-align: top;
}

.submissions-votes__comment-cell {
  font-size: var(--font-size-caption);
}

.submissions-votes-table .submissions-votes__thread-net-col,
.submissions-votes-table .submissions-votes__thread-net-cell,
.submissions-votes-table .submissions-votes__flags-col,
.submissions-votes-table .submissions-votes__flags-cell {
  text-align: center;
}

/* [ADMIN] IGDB import/browse */
.igdb-toolbar,
.igdb-search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.igdb-search-form .admin-search-bar {
  flex: 1 1 16rem;
  max-width: min(36rem, 100%);
}

.games-search-form {
  width: 100%;
}

.games-search-form .admin-search-bar {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

.games-search-form__download-inline {
  height: var(--admin-search-row-height);
  min-height: var(--admin-search-row-height);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
}

.igdb-table th.col--meta,
.igdb-table td.col--meta {
  color: var(--color-muted);
}

/* [ADMIN] Field mapping UI + grouped select */
.mapping-toolbar {
  --admin-search-row-height: var(--size-touch-min);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
}

.mapping-schema-picker-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 1 auto;
  min-width: 0;
}

/* Same control height as .admin-search-bar (select + actions share one row). */
.mapping-toolbar .games-search__select {
  flex: 1 1 auto;
  width: 100%;
  min-width: min(100%, 16rem);
  max-width: 100%;
  height: var(--admin-search-row-height);
  min-height: var(--admin-search-row-height);
  padding-block: 0;
  padding-inline-start: var(--space-sm);
  padding-inline-end: var(--select-padding-inline-end);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  font-size: var(--font-size-caption);
  line-height: 1;
  box-sizing: border-box;
}

.mapping-toolbar > .button {
  height: var(--admin-search-row-height);
  min-height: var(--admin-search-row-height);
  max-height: var(--admin-search-row-height);
  padding-block: 0;
  padding-inline: var(--space-sm);
  line-height: 1;
  box-sizing: border-box;
}

.mapping-edit-fields-hint {
  max-width: 40rem;
}

/* Toolbar: no extra bottom margin/padding — outer .stack--gap-md supplies global rhythm only. */
.mapping-edit-fields-page .mapping-toolbar {
  margin-bottom: 0;
  padding-bottom: 0;
}

.mapping-edit-fields__heading {
  margin: 0;
  font-size: var(--font-size-section-title);
}

/* Match text inputs to Type <select> height (compact padding + caption type scale). */
.mapping-edit-fields-page .mapping-edit-fields-table .form-input,
.mapping-edit-fields-page .mapping-edit-fields-table .games-search__select,
.mapping-edit-fields-page .mapping-edit-fields-form > section.card:first-of-type .form-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-xs);
  font-size: var(--font-size-caption);
  line-height: 1.25;
  box-sizing: border-box;
}

.mapping-edit-fields-table__mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.mapping-edit-fields-table__actions-col {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.mapping-edit-fields-table .games-search__select {
  min-width: 7rem;
}

/* Same vertical footprint as .form-input / Type select in this table (not full touch-min .button). */
.mapping-edit-fields-page .mapping-edit-fields-table .mapping-edit-fields-table__remove-btn.button {
  min-height: 0;
  max-height: none;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-xs);
  font-size: var(--font-size-caption);
  line-height: 1.25;
  white-space: nowrap;
  box-sizing: border-box;
}

.mapping-edit-fields-footer {
  flex-wrap: wrap;
}

.mapping-table td {
  vertical-align: middle;
}

.mapping-row--mapped td:first-child {
  border-left: 2px solid var(--color-accent-border);
  padding-left: var(--space-sm);
}

.mapping-row--group td {
  border-top: var(--border-width-default) solid var(--color-border);
  border-bottom: var(--border-width-default) solid var(--color-border);
  background: var(--color-surface-hover);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mapping-field-label,
.mapping-field-key {
  display: block;
}

.mapping-field-label {
  font-weight: var(--font-weight-semibold);
}

.mapping-field-key,
.mapping-status {
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.mapping-type-badge {
  display: inline-flex;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--color-surface-hover);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mapping-type--string { color: var(--color-accent-action); }
.mapping-type--integer { color: var(--color-accent-success); }
.mapping-type--date { color: var(--color-accent-warning); }
.mapping-type--boolean { color: var(--color-accent-danger); }
.mapping-type--array { color: var(--color-accent-info); }

.gs-wrapper { position: relative; }

.gs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-active);
  color: var(--color-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.gs-trigger:hover,
.gs-trigger--set {
  border-color: var(--color-accent-border);
  color: var(--color-text);
}

.gs-trigger--orphan {
  border-color: var(--color-accent-warning);
  color: var(--color-text);
}

.gs-trigger-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-chevron {
  flex-shrink: 0;
  opacity: 0.6;
  font-size: 0.7rem;
}

.gs-panel {
  position: fixed;
  z-index: 2000;
  max-height: 320px;
  overflow: auto hidden;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
  font-size: var(--font-size-caption);
}

.gs-option,
.gs-group-header {
  padding: var(--space-xs) var(--space-sm);
}

.gs-option {
  cursor: pointer;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-option:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.gs-option--blank {
  border-bottom: var(--border-width-default) solid var(--color-border);
  color: var(--color-muted);
  font-style: italic;
}

.gs-option--selected {
  color: var(--color-accent-action);
}

.gs-option--selected::before {
  content: "✓ ";
  font-size: var(--font-size-caption);
}

.gs-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-top: var(--border-width-default) solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.gs-group-header:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.gs-group-items .gs-option {
  padding-left: var(--space-lg);
}

.mapping-schema-form,
.mapping-form-footer {
  margin-top: var(--space-sm);
}

.mapping-form-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* [ADMIN] DB games spreadsheet */
.spreadsheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.spreadsheet-grid-wrap {
  overflow-x: auto;
}

.spreadsheet-grid .spreadsheet-cell {
  min-width: 130px;
  cursor: pointer;
}

.spreadsheet-grid .spreadsheet-id-cell {
  color: var(--color-muted);
  font-family: var(--font-mono);
}

.spreadsheet-grid .spreadsheet-cell.is-selected {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.spreadsheet-grid tr.is-selected-row td {
  background: var(--color-focus-ring-shadow);
}

.spreadsheet-grid .spreadsheet-cell.is-dirty {
  background: color-mix(in srgb, var(--color-accent-warning) 18%, transparent);
}

.spreadsheet-cell-input,
.spreadsheet-filter-input {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-width-default) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-active);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-caption);
}

.spreadsheet-cell-input:focus-visible,
.spreadsheet-filter-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-inset-offset);
  box-shadow: none;
}

.spreadsheet-sort-btn {
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.spreadsheet-sort-btn:hover {
  color: var(--color-text);
}

.spreadsheet-human-col {
  min-width: 160px;
  max-width: 260px;
  white-space: normal;
}

/* [SHIM] Inline validation / errors */
.text-error {
  color: var(--color-accent-danger);
}

/* [SHIM] Dialog primitives from web `games-list.css` (shared popup chrome) */
.game-sidebar__dialog {
  --dialog-edge: var(--space-md);
  --dialog-max-width: min(44rem, calc(100vw - 2 * var(--dialog-edge)));
  --dialog-max-height: calc(100dvh - 2 * var(--dialog-edge));
  width: var(--dialog-max-width);
  max-width: var(--dialog-max-width);
  max-height: var(--dialog-max-height);
  margin: auto;
  border: var(--border-width-default) solid var(--color-border-secondary);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}

.game-sidebar__dialog:not([open]) {
  display: none;
}

.game-sidebar__dialog::backdrop {
  background: var(--color-overlay-scrim);
}

.game-sidebar__dialog--scrollable {
  padding: 0;
}

.game-sidebar__dialog-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.game-sidebar__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-width-default) solid var(--color-border-secondary);
  background: var(--color-surface-sunken);
}

.game-sidebar__dialog-title {
  margin: 0;
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-semibold);
}

.game-sidebar__dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size-touch-min) - 0.25rem);
  height: calc(var(--size-touch-min) - 0.25rem);
  min-width: calc(var(--size-touch-min) - 0.25rem);
  min-height: calc(var(--size-touch-min) - 0.25rem);
  padding: 0;
  border: var(--border-width-default) solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-muted);
  cursor: pointer;
}

.game-sidebar__dialog-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.game-sidebar__dialog-scroll {
  min-height: 0;
  overflow: auto;
  background: var(--color-surface-raised);
}

.game-sidebar__dialog-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.game-sidebar__dialog-lead {
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
  font-size: var(--font-size-caption);
}

.game-sidebar__dialog-form {
  margin: 0;
}

.game-sidebar__dialog-list {
  border: var(--border-width-default) solid var(--color-border-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

.game-sidebar__dialog-btn {
  padding: var(--space-2xs) var(--space-md);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-caption);
  cursor: pointer;
}

.game-sidebar__dialog-btn--primary {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

/* [ADMIN] Platform export modal content */
.platform-export-modal {
  --dialog-max-width: min(74rem, calc(100vw - 2 * var(--dialog-edge)));
}

.platform-export-page {
  border: var(--border-width-default) solid var(--color-border-secondary);
  border-radius: var(--radius-container);
  background: var(--color-surface-raised);
  padding: var(--space-md);
}

.platform-export-page__lead {
  margin: 0 0 var(--space-sm);
}

.platform-export-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.platform-export-page__actions {
  margin-top: var(--space-sm);
}

/* Games Database subpages: stacked toggle cards (spacing separate from nav → first card; see .games-workspace). */
.games-database-subpage {
  display: flex;
  flex-direction: column;
  gap: var(--stack-space, var(--space-md));
  width: 100%;
}

/* Global collapsible stack — native <details>; pair with .platform-export-page on the <details>. */
.admin-toggle-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}

.admin-toggle-list__item.platform-export-page {
  padding: 0;
}

.admin-toggle-list__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.admin-toggle-list__summary::-webkit-details-marker {
  display: none;
}

.admin-toggle-list__summary::before {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-right: var(--space-xs);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(0.12rem) rotate(-45deg);
  transition: transform var(--duration-interaction) var(--ease-default);
}

.admin-toggle-list__item[open] > .admin-toggle-list__summary::before {
  transform: rotate(45deg);
}

.admin-toggle-list__title {
  flex: 1;
  min-width: 0;
}

.admin-toggle-list__body {
  padding: var(--space-md);
  padding-top: var(--space-sm);
}

/* Nested disclosure inside a toggle panel (e.g. CSV row errors) */
.admin-toggle-list__subdetails {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: var(--border-width-default) solid var(--color-border-secondary);
  background: var(--color-surface-sunken);
}

.admin-toggle-list__subdetails > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-caption);
  list-style: none;
}

.admin-toggle-list__subdetails > summary::-webkit-details-marker {
  display: none;
}

.admin-toggle-list__subdetails ul {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-lg);
}

.games-tab-nav {
  margin-bottom: var(--space-sm);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
  width: 100%;
}

.games-tab-nav > .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Tabs are anchor buttons; ensure primary/active matches web repo blue even when :visited */
.games-tab-nav > .button--primary:visited,
.games-tab-nav > .button--primary:link {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
}

.games-tab-nav > .button--primary:visited:hover,
.games-tab-nav > .button--primary:link:hover {
  filter: brightness(1.08);
}

/* Database tab: secondary row (Explorer / Inclusion / Exclusion) */
.games-database-section-nav {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--games-database-nav-gap, var(--space-2xs));
  width: 100%;
}

@media (min-width: 40rem) {
  .games-database-section-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.games-database-section-nav > .button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.games-database-section-nav > .button--primary:visited,
.games-database-section-nav > .button--primary:link {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
}

.games-database-section-nav > .button--primary:visited:hover,
.games-database-section-nav > .button--primary:link:hover {
  filter: brightness(1.08);
}

/* Games index: sections stack at natural height; scroll the main column (.app-main__body).
   Matches .app-main horizontal rhythm; top gap matches stack --space-md. */
.app-main:has(.games-workspace) {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  padding-inline: var(--space-md);
}

@media (min-width: var(--breakpoint-md)) {
  .app-main:has(.games-workspace) {
    padding-inline: var(--space-lg);
  }
}

.app-main__body:has(> .games-workspace) {
  gap: 0;
}

.app-main__body:has(> .games-workspace) > .games-workspace {
  flex: 0 0 auto;
  min-height: auto;
}

.games-workspace {
  --games-scroll-platform: clamp(13rem, 32vh, 26rem);
  --games-scroll-type: clamp(10rem, 24vh, 18rem);
  --games-scroll-status: clamp(8rem, 20vh, 15rem);
  --games-scroll-columns: clamp(11rem, 28vh, 22rem);
  --games-scroll-table: min(26rem, 58vh);
  --games-scroll-textarea: clamp(9rem, 22vh, 15rem);
  /* Nav → panel / dialog: same token as horizontal gap between Explorer / Inclusion / Exclusion (.games-database-section-nav). */
  --games-database-nav-gap: var(--space-2xs);

  display: flex;
  flex-direction: column;
  gap: var(--games-database-nav-gap);
  width: 100%;
}

/* Scrollable checkbox / column lists: cap height, scroll inside */
.games-field-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  border-radius: var(--radius-sm);
  border: var(--border-width-default) solid var(--color-border-secondary);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-surface-sunken);
}

.games-field-scroll--platforms {
  max-height: var(--games-scroll-platform);
}

/* Platform lists grouped by IGDB platform_type (+ VR by name) */
.games-workspace .games-platform-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.games-workspace .games-platform-group:last-child {
  margin-bottom: 0;
}

.games-workspace .games-platform-group .platform-export-modal__option {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  box-sizing: border-box;
}

.games-workspace .games-platform-group .platform-export-modal__option--with-tier {
  justify-content: space-between;
  gap: var(--space-xs);
}

.games-workspace .games-platform-group .platform-export-modal__option-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.games-workspace .games-platform-group .platform-export-modal__tier-select {
  flex-shrink: 0;
  max-width: 11rem;
  font-size: var(--font-size-caption);
}

/* One option per row above grouped sections (Platform CSV “Select all”) */
.games-workspace .platform-export-page__panel-body.platform-export-modal__options > .platform-export-modal__option--select-all {
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.games-platform-group__title {
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--border-width-default) solid var(--color-border-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-muted);
}

.games-field-scroll--types {
  max-height: var(--games-scroll-type);
}

.games-field-scroll--statuses {
  max-height: var(--games-scroll-status);
}

.games-field-scroll--columns {
  max-height: var(--games-scroll-columns);
}

.games-table-scroll {
  max-height: var(--games-scroll-table);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-container);
  border: var(--border-width-default) solid var(--color-border-secondary);
}

.games-workspace #bulk-csv textarea {
  max-height: var(--games-scroll-textarea);
  overflow-y: auto;
}

.games-workspace .games-tab-nav {
  flex-shrink: 0;
  margin-bottom: 0;
}

.games-workspace .games-database-subpage {
  flex: 0 0 auto;
  min-height: auto;
}

.games-workspace .platform-export-page {
  flex: 0 0 auto;
  min-height: auto;
}

.games-workspace .platform-export-page:not(.platform-export-page--panel-layout) {
  overflow: visible;
}

/* Database + Export: panels flow at content height (no viewport-splitting flex grid). */
.games-workspace .platform-export-page--panel-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow: visible;
}

.games-workspace .platform-export-page__form--panel-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.games-workspace .platform-export-page__form--panel-layout > .platform-export-page__lead {
  flex-shrink: 0;
}

.games-workspace .platform-export-page__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-md);
  align-content: start;
}

.games-workspace .platform-export-page__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.games-workspace .platform-export-page__panel-head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.games-workspace .platform-export-page__panel-head .platform-export-modal__section-help {
  margin-bottom: 0;
}

.games-workspace .platform-export-page__panel-title {
  flex-shrink: 0;
  margin-top: 0;
}

.games-workspace .platform-export-page__panel-body:not(.games-field-scroll) {
  overflow: visible;
}

.games-workspace .platform-export-page__form--panel-layout .platform-export-page__actions {
  flex-shrink: 0;
  margin-top: var(--space-xs);
}

.games-workspace .platform-export-page__panel-body.platform-export-modal__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-sm);
}

.games-workspace .platform-export-page__panel-body.platform-export-modal__types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs) var(--space-sm);
}

.games-workspace .platform-export-page__panel-body.platform-export-modal__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs) var(--space-sm);
}

.platform-export-modal .game-sidebar__dialog-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: var(--space-2xs);
}

.platform-export-modal__options {
  max-height: clamp(8rem, 26dvh, 14rem);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs) var(--space-sm);
}

.platform-export-modal__option {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--font-size-caption);
}

.platform-export-modal__footer {
  margin-top: var(--space-sm);
  position: sticky;
  bottom: 0;
  background: var(--color-surface-raised);
  padding-top: var(--space-2xs);
  border-top: var(--border-width-default) solid var(--color-border-secondary);
}

.platform-export-modal__submit {
  width: 100%;
}

.platform-export-modal__section-title {
  margin: var(--space-sm) 0 var(--space-2xs);
  font-size: var(--font-size-caption);
  font-weight: 600;
}

.platform-export-modal__option--select-all span {
  font-weight: 600;
}

.platform-export-modal__section-help {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-caption);
}

.platform-export-modal__columns {
  max-height: clamp(7rem, 22dvh, 11rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs) var(--space-sm);
}

.platform-export-modal__types {
  max-height: clamp(5.5rem, 16dvh, 8rem);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs) var(--space-sm);
}

@media (max-height: 760px) {
  .platform-export-modal__options {
    max-height: clamp(6.5rem, 22dvh, 10rem);
  }

  .platform-export-modal__columns {
    max-height: clamp(5.5rem, 18dvh, 8rem);
  }

  .platform-export-modal__types {
    max-height: clamp(4.5rem, 14dvh, 6rem);
  }
}

.platform-export-progress {
  --dialog-max-width: min(36rem, calc(100vw - 2 * var(--dialog-edge)));
}

.platform-export-progress__track {
  width: 100%;
  height: 0.7rem;
  background: var(--color-surface-sunken);
  border: var(--border-width-default) solid var(--color-border-secondary);
  border-radius: 999px;
  overflow: hidden;
}

.platform-export-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  transition: width 220ms ease;
}

.platform-export-progress__meta {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-columns {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* [ADMIN] Performance analytics (HubSpot-style growth + charts) */
.performance-page > script[type="application/json"] {
  display: none;
}

.performance-page__body {
  width: 100%;
  min-width: 0;
}

/* Match navbar → first row spacing to stack/--space-md between page sections (app-main is
   --space-lg on md+ by default, which reads as extra air above the range tabs). */
@media (min-width: var(--breakpoint-md)) {
  .app-main:has(.performance-page) {
    padding-top: var(--space-md);
  }
}

.performance-page__body .performance-chart-grid,
.performance-page__body .performance-chart-grid--bars {
  gap: var(--stack-space, var(--space-md));
}

.performance-page__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
}

/* Full-width row; each range control shares width evenly on wide viewports */
.performance-page__header .performance-range {
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: stretch;
}

.performance-page__header .performance-range > a.button,
.performance-page__header .performance-range > a.performance-range__btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
}

/* Match .button--primary (games tab / global primary control) */
.performance-range__btn--active,
.performance-range__btn--active:visited {
  border-color: transparent;
  background: var(--color-accent-action);
  color: var(--color-text-on-accent);
  box-shadow: none;
}

.performance-page__header .performance-range > a.performance-range__btn--active:hover {
  filter: brightness(1.08);
}

.performance-chart-card__hint {
  margin: 0;
  font-size: var(--font-size-caption);
}

.performance-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.performance-chart-card--wide {
  grid-column: 1 / -1;
}

.performance-chart-frame {
  position: relative;
  width: 100%;
  height: 300px;
}

.performance-chart-frame--donut {
  height: 260px;
}

.performance-chart-frame--bar {
  height: min(380px, 55vh);
}

.performance-chart-grid--bars {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .performance-chart-grid,
  .performance-chart-grid--bars {
    grid-template-columns: 1fr;
  }

  .performance-chart-frame--bar {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .performance-page__header .performance-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .performance-page__header .performance-range > a.button,
  .performance-page__header .performance-range > a.performance-range__btn {
    flex: unset;
    width: 100%;
  }
}

/* [ADMIN] Users / Submissions — same filter chrome as bitgrader-web (search row + select row) */
.users-filter-form,
.submissions-filter-form,
.collections-filter-form,
.petitions-filter-form {
  width: 100%;
  min-width: 0;
}

.users-filter-form {
  margin-bottom: var(--space-md);
}

/* Submissions / Collections / Petitions: filter + table card are siblings in `section.stack.stack--gap-md` — use token gap only. */
.submissions-filter-form,
.collections-filter-form,
.petitions-filter-form {
  margin-bottom: 0;
}

.users-index-table-wrap,
.submissions-votes-table-wrap {
  margin-top: var(--space-md);
}

.submissions-votes-panel .submissions-votes-table-wrap {
  margin-top: 0;
}

.collections-table-panel .collections-index-table-wrap {
  margin-top: 0;
}

.petitions-table-panel .petitions-index-table-wrap {
  margin-top: 0;
}

/* Petitions: top search row spans full content width (Game Title + submit) */
.petitions-page .petitions-filter-form__game-row {
  width: 100%;
  flex: 1 1 100%;
}

.petitions-page .petitions-filter-form__game-row .admin-search-bar--grow {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.collections-data-table .collections__score-col,
.collections-data-table .collections__score-cell,
.collections-data-table .collections__flags-col,
.collections-data-table .collections__flags-cell,
.collections-data-table .collections__games-col,
.collections-data-table .collections__games-cell {
  text-align: center;
}

.flags-index__reason-cell {
  white-space: pre-line;
  word-break: break-word;
  max-width: min(36rem, 40vw);
}

.users-index-user__email {
  font-weight: 600;
}

.users-index-user__meta {
  font-size: var(--font-size-caption);
  color: var(--color-muted);
  margin-top: var(--space-3xs);
}

.users-index-user__id {
  margin-inline-start: var(--space-xs);
}

.users-index-role {
  font-weight: 500;
}

.users-index-security {
  font-size: var(--font-size-caption);
  max-width: 14rem;
}

.users-index-security__sep {
  margin-inline: var(--space-3xs);
  color: var(--color-muted);
}

.users-index-activity {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.users-index-activity span {
  margin-inline-end: var(--space-xs);
}

.users-index-actions-col {
  vertical-align: middle;
  min-width: 12rem;
  text-align: right;
}

.users-index-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: flex-end;
}

.users-index-actions .button {
  padding: 0.35rem 0.65rem;
  font-size: var(--font-size-caption);
}

.data-table__col--numeric {
  text-align: right;
}

.users-index-activity.data-table__col--numeric {
  text-align: center;
}

.detail-list__muted {
  color: var(--color-muted);
}

.user-show-stats {
  margin-bottom: var(--space-lg);
}