/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION (#28) — навігація сторінками.

   Блоки:
   1. .pagination            — ядро-<nav>: prev / номери+«…» / next (стандартний).
   2. .pagination--compact   — модифікатор: prev / лічильник «N з M» / next.
   3. .pagination-bar        — окремий блок-композиція (як input-wrap/select-wrap):
                               status (ліворуч) + .pagination (центр) + select (праворуч).
                               НЕ <nav> — це тулбар, що містить <nav>; select усередині
                               навігаційного лендмарка був би семантично хибним.

   Стани комірки: default · hover (фон surface-muted) · focus-visible (кільце) ·
                  current (aria-current="page": medium + 2px підкреслення) ·
                  disabled (краї: prev/next як <span aria-disabled>, поза tab-order).

   Підкреслення current — через text-decoration (а не позиційний брус): авто-трекінг
   ширини «7» vs «24», точно як у прикладі. Товщина = component.pagination.indicator-height.
   Прев/next-шеврони — інлайн-SVG на currentColor (колір слідує за станом комірки).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Контейнер-nav ──────────────────────────────────────────────────────────── */
.pagination {
  font-family: var(--uris-font-family-body);
  -webkit-font-smoothing: antialiased;
}

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

.pagination__item {
  display: inline-flex;
}

/* ── Спільна геометрія комірки (link · btn · ellipsis) ──────────────────────── */
.pagination__link,
.pagination__btn,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--uris-component-pagination-item-size);
  height: var(--uris-component-pagination-item-size);
  padding-inline: var(--uris-spacing-2);
  font-size: var(--uris-text-base-size);
  line-height: 1;
}

/* ── Номер сторінки ─────────────────────────────────────────────────────────── */
.pagination__link {
  color: var(--uris-color-semantic-text);
  font-weight: var(--uris-font-weight-regular);
  text-decoration: none;
  border-radius: var(--uris-radius-md);
  cursor: pointer;
  transition:
    background-color var(--uris-duration-fast) var(--uris-ease-default),
    color var(--uris-duration-fast) var(--uris-ease-default);
}

.pagination__link:hover {
  background: var(--uris-color-semantic-surface-muted);
}
/* focus-visible: глобальне кільце фокуса — _shared/utilities.css */

/* Поточна сторінка — medium + підкреслення (брус під цифрами) */
.pagination__link[aria-current="page"] {
  color: var(--uris-color-semantic-primary);
  font-weight: var(--uris-font-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: var(--uris-component-pagination-indicator-height);
  text-underline-offset: var(--uris-spacing-1);
  cursor: default;
}

/* Current не отримує hover-фон — лише підкреслення несе стан (як у прикладі) */
.pagination__link[aria-current="page"]:hover {
  background: transparent;
}

/* ── Кнопки prev / next ─────────────────────────────────────────────────────── */
.pagination__btn {
  color: var(--uris-color-semantic-text);
  text-decoration: none;
  border-radius: var(--uris-radius-md);
  cursor: pointer;
  transition:
    background-color var(--uris-duration-fast) var(--uris-ease-default),
    color var(--uris-duration-fast) var(--uris-ease-default);
}

.pagination__btn:hover {
  background: var(--uris-color-semantic-surface-muted);
}

/* Іконка-шеврон — 20px, консистентно з field/select (DECISIONS input) */
.pagination__btn-icon {
  display: block;
  width: var(--uris-component-icon-size-md);
  height: var(--uris-component-icon-size-md);
}

/* Disabled на краях — рендериться як <span aria-disabled> (поза tab-order) */
.pagination__btn[aria-disabled="true"] {
  color: var(--uris-color-semantic-surface-active);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Скорочення «…» (неінтерактивне) ────────────────────────────────────────── */
.pagination__ellipsis {
  color: var(--uris-color-semantic-text-muted);
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВАРІАНТ: compact — prev / лічильник «N з M» / next
   ═══════════════════════════════════════════════════════════════════════════ */
.pagination--compact .pagination__list {
  gap: var(--uris-spacing-2);
}

.pagination__status {
  display: inline-flex;
  align-items: center;
  height: var(--uris-component-pagination-item-size);
  padding-inline: var(--uris-spacing-3);
  color: var(--uris-color-semantic-text-muted);
  font-size: var(--uris-text-sm-size);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОЗИЦІЯ: pagination-bar — повна смуга для таблиць/реєстрів
   Сітка 1fr auto 1fr: пагінація точно по центру незалежно від ширини зон.
   ═══════════════════════════════════════════════════════════════════════════ */
.pagination-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--uris-spacing-4) var(--uris-spacing-6);
  font-family: var(--uris-font-family-body);
}

.pagination-bar__status {
  justify-self: start;
  color: var(--uris-color-semantic-text-muted);
  font-size: var(--uris-text-sm-size);
  white-space: nowrap;
}

.pagination-bar > .pagination {
  justify-self: center;
}

/* У смузі пагінація лишається в один рядок: інакше flex-wrap робить min-content
   списку = одна комірка, і grid-трек auto колапсує (1fr-зони з'їдають ширину) */
.pagination-bar > .pagination .pagination__list {
  flex-wrap: nowrap;
}

.pagination-bar__size {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  color: var(--uris-color-semantic-text-muted);
  font-size: var(--uris-text-sm-size);
  white-space: nowrap;
}

/* Інлайн-компактний select — перевикористання .select-wrap + .fa-input (field/select),
   лише звужуємо до auto-ширини та зменшуємо вертикальний padding */
.pagination-bar__size .select-wrap {
  display: inline-flex;
  width: auto;
}

.pagination-bar__size select.fa-input {
  width: auto;
  padding-block: var(--uris-spacing-1);
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text);
}

/* Стек на вузьких екранах (desktop-first: смуга для повноекранних таблиць).
   Поріг ~900px: нижче нього три зони (status ~150 + пагінація ~440 + size ~150)
   тісняться — стек чистіший за горизонтальний втиск. */
@media (max-width: 900px) {
  .pagination-bar {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--uris-spacing-4);
  }
  .pagination-bar__status,
  .pagination-bar__size {
    justify-self: center;
  }
  /* У стеку пагінація знову може переноситись (вузькі екрани/мобільні) */
  .pagination-bar > .pagination .pagination__list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pagination__link,
  .pagination__btn {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ПЕРЕХІД НА СТОРІНКУ (#40) — «Сторінка [N] з M» у складі .pagination-bar.
   Кнопки країв (перша/остання) рендерить JS за data-pagination-edges —
   стилі успадковують .pagination__btn.
   ═══════════════════════════════════════════════════════════════════════════ */
.pagination__goto {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text);
  white-space: nowrap;
}

.pagination__goto-input {
  inline-size: 56px;
  block-size: var(--uris-component-pagination-item-size);
  padding-inline: var(--uris-spacing-2);
  text-align: center;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-surface-active);
  border-radius: var(--uris-radius-sm);
  transition: border-color var(--uris-duration-fast) var(--uris-ease-default);
}

.pagination__goto-input:hover {
  border-color: var(--uris-color-semantic-text-muted);
}

/* Сховати нативні спінери числа — консистентно з input[type=number] (#8) */
.pagination__goto-input::-webkit-inner-spin-button,
.pagination__goto-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pagination__goto-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Група правого краю бару (#40): goto + вибір розміру в одній клітинці grid
   (бар лишається 3-колонковим: status · pagination · end-група) */
.pagination-bar__end {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-6);
  justify-self: end;
  white-space: nowrap;
}