/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/pagination.css
   Version: 0.1.0 · Build: 2026-09-13 · Benötigt: tokens.css, base.css
   VENDORED — READ-ONLY.

   UNGEPRÜFT (Stand 2026-09-21) — DESIGN.md §0e. Keine Seite trägt diese
   Komponente: null Vorkommen in ticketsystem und Team Hub. Das Vorbild
   steht in forum.bluehorizonrp.com, und dieses Projekt ist noch nicht
   umgebaut — die Komponente wurde nach einer Vorlage gebaut, nicht für
   einen Nutzer. 27 Vorkommen im Design-Guide belegen nichts: dort steht
   sie allein in einer Bühne, die der Guide selbst stellt.

   Vorlage war .pagination-container aus forum.bluehorizonrp.com — das einzige
   Projekt im Scope mit einer vollständigen Pagination.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bh-space-3);
}

.bh-pagination__info {
  color: var(--bh-text-muted);
  font-size: var(--bh-text-xs);
  font-variant-numeric: tabular-nums;
}

.bh-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--bh-space-1);
  margin: 0; padding: 0;
  list-style: none;
}

.bh-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--bh-control-height);
  min-height: var(--bh-control-height);
  padding: 0 var(--bh-space-2);

  border: 1px solid transparent;
  border-radius: var(--bh-radius-lg);
  background: transparent;
  color: var(--bh-text-tertiary);

  font-family: inherit;
  font-size: var(--bh-text-sm);
  font-weight: var(--bh-weight-medium);
  font-variant-numeric: tabular-nums;

  cursor: pointer;
  transition: background var(--bh-transition), color var(--bh-transition),
              border-color var(--bh-transition);
}

.bh-pagination__link > svg { width: var(--bh-icon-size); height: var(--bh-icon-size); }

.bh-pagination__link:hover  { background: var(--bh-surface-hover); color: var(--bh-text-primary); }
.bh-pagination__link:active { background: var(--bh-surface-3); }

.bh-pagination__link[aria-current="page"],
.bh-pagination__link.is-active {
  background: var(--bh-color-accent-soft);
  border-color: var(--bh-color-accent);
  color: var(--bh-color-accent);
}

.bh-pagination__link:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}

.bh-pagination__link:disabled,
.bh-pagination__link[aria-disabled="true"] {
  color: var(--bh-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Auslassung zwischen Seitenbereichen — kein Bedienelement. */
.bh-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bh-control-height);
  min-height: var(--bh-control-height);
  color: var(--bh-text-muted);
  user-select: none;
}

/* Auf Mobil bleiben nur Zurück, aktuelle Seite und Weiter. */
@media (max-width: 639px) {
  .bh-pagination { justify-content: center; }
  .bh-pagination__list .bh-pagination__item:not(:first-child):not(:last-child) { display: none; }
  .bh-pagination__list .bh-pagination__item .bh-pagination__link[aria-current="page"] { display: inline-flex; }
  .bh-pagination__list .bh-pagination__item:has(.bh-pagination__link[aria-current="page"]) { display: block; }
}