/* List pages: filter bar, chips, data table, sort links, footer. */

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.filter-bar .form-select { width: auto; min-width: 9.5rem; max-width: 14rem; }
.filter-search { position: relative; flex: 1 1 18rem; max-width: 26rem; }
.filter-search > .bi, .filter-search > svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--mc-muted); pointer-events: none; }
.filter-search .form-control { padding-left: 2.2rem; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.85rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem 0.2rem 0.7rem;
  border: 1px solid var(--mc-border-strong); border-radius: 999px; background: var(--mc-surface);
  color: var(--mc-ink); font-size: 0.8125rem; text-decoration: none;
}
.filter-chip:hover { border-color: var(--mc-danger); color: var(--mc-danger); text-decoration: none; }

.list-card { border: 1px solid var(--mc-border); border-radius: var(--mc-radius); background: var(--mc-surface); box-shadow: var(--mc-shadow-sm); overflow: hidden; }
.list-card .table { margin: 0; }
.list-card .table > :not(caption) > tr:last-child > * { border-bottom: 0; }
.list-card .table-responsive { border: 0; box-shadow: none; border-radius: 0; }
.list-card .table > tbody > tr:hover > * { background: var(--mc-surface-2); }
.list-card .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.list-card .col-id { width: 4.5rem; color: var(--mc-muted); font-variant-numeric: tabular-nums; }
.list-card td.num, .list-card th.num { text-align: right; font-variant-numeric: tabular-nums; }

.sort-link { display: inline-flex; align-items: center; gap: 0.15rem; color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--mc-ink); text-decoration: none; }
.sort-link.is-active { color: var(--mc-brand); }
.sort-link .sort-idle { opacity: 0; font-size: 0.8em; transition: opacity 0.12s; }
th:hover .sort-link .sort-idle { opacity: 0.6; }

.person { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.person .avatar { flex: none; }
.person .meta { min-width: 0; }
.person .primary { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .secondary { font-size: 0.8125rem; color: var(--mc-muted); }
.role-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.muted-dash { color: var(--mc-border-strong); }

.list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; padding: 0.85rem 1rem; border-top: 1px solid var(--mc-border); background: var(--mc-surface); }
.list-footer .per-page { display: flex; align-items: center; gap: 0.25rem; }
.list-footer .per-page .btn { --bs-btn-padding-x: 0.5rem; --bs-btn-padding-y: 0.15rem; }
.list-card > .list-footer { background: var(--mc-surface); }

#list[aria-busy="true"] .list-card { opacity: 0.55; transition: opacity 0.15s; }
#list { min-height: 6rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

/* Keep rows one line high: long names are clipped with an ellipsis (the full value is in the tooltip) */
.list-card .table > :not(caption) > * > * { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.cell-clip { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-card .col-actions .btn + .btn { margin-left: 0.25rem; }
.person .primary { max-width: 13rem; }
.campaign-thumb { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: var(--mc-radius-sm); border: 1px solid var(--mc-border); flex: none; }

.filter-date { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.filter-date span { color: var(--mc-muted); font-size: 0.8125rem; font-weight: 550; }
.filter-date .form-control { width: auto; }
.cell-wide { max-width: 32rem; } .cell-wide .primary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Thumbnail over an initial-letter avatar: if the image file is missing the image removes itself and the avatar shows */
.thumb-wrap { position: relative; width: 2.4rem; height: 2.4rem; flex: none; display: block; }
.thumb-wrap .avatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--mc-radius-sm); }
.thumb-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--mc-radius-sm); border: 1px solid var(--mc-border); background: var(--mc-surface); }

/* Heading row above the rows of one campaign */
.list-card .table > tbody > tr.group-row > th { padding: 0.5rem 1rem; background: var(--mc-surface-2); border-bottom: 1px solid var(--mc-border); font-size: 0.875rem; font-weight: 600; color: var(--mc-ink-2); }
.list-card .table > tbody > tr.group-row:hover > * { background: var(--mc-surface-2); }
.list-card .table > tbody > tr.group-row svg { margin-right: 0.3rem; color: var(--mc-muted); }
.list-card .table > tbody > tr.group-row .group-id { margin-left: 0.35rem; color: var(--mc-muted); font-weight: 400; }

/* Translation values shown in a table cell: "English  Hello" one per line */
.translation-values { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; min-width: 16rem; max-width: 34rem; }
.translation-values li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; font-size: 0.875rem; }
.translation-values .lang { color: var(--mc-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.translation-values .value { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* The actions column stays in view at the right edge when a wide table scrolls sideways, so Edit is never cut off */
.list-card .table > :not(caption) > * > .col-actions { position: sticky; right: 0; z-index: 1; background: var(--mc-surface); box-shadow: -1px 0 0 var(--mc-border); }
.list-card .table > tbody > tr:hover > .col-actions { background: var(--mc-surface-2); }
.list-card .table > tbody > tr.group-row > th { position: sticky; left: 0; }
.list-card .col-actions .btn-icon { --bs-btn-padding-x: 0.45rem; }
.list-card .table .col-games { max-width: 10rem; }