/* ============================================================
 * tc-pagination
 * Schlanker Seitenblaetterer fuer Listen (z.B. Match-Historie).
 * Prev/Next-Chevrons + Status ("Seite X / Y"). JS-agnostisch:
 * nur Markup + Klassen; die Seiten-Logik liefert der Consumer.
 * ASCII-only (Encoding-Regel). Datei: css/components/pagination.css
 * ============================================================ */

.tc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-3, 12px);
  margin-top: var(--tc-space-3, 12px);
}

.tc-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--tc-space-3, 12px);
  border: 1px solid var(--tc-border-default, rgba(255, 255, 255, 0.14));
  border-radius: var(--tc-radius-md, 10px);
  background: var(--tc-bg-surface-1, rgba(255, 255, 255, 0.04));
  color: var(--tc-text-default, #dddddd);
  font-size: var(--tc-text-base, 1rem);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tc-pagination__btn:hover:not(:disabled),
.tc-pagination__btn:focus-visible:not(:disabled) {
  border-color: var(--tc-accent, #c9a959);
  color: var(--tc-highlight, #c9a959);
  outline: none;
}
.tc-pagination__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.tc-pagination__status {
  min-width: 96px;
  text-align: center;
  font-size: var(--tc-text-sm, 0.9rem);
  color: var(--tc-text-muted, #9a9a9a);
}
.tc-pagination__status b {
  color: var(--tc-text-strong, #f5f5f5);
  font-weight: 600;
}