/* Pagination v2 Component — UI Comprehensive Refactor v2
 * Requires: tokens.css, spacing.css
 *
 * Usage:
 *   <div class="pagination-v2" role="navigation" aria-label="Пагинация">
 *     <span class="pagination-v2__info">Показано 1–50 из 1,234</span>
 *     <div class="pagination-v2__controls">
 *       <button class="pagination-v2__btn" aria-label="Первая страница" disabled>
 *         <svg class="icon"><use href="#i-chevrons-left"/></svg>
 *       </button>
 *       <button class="pagination-v2__btn" aria-label="Предыдущая страница">
 *         <svg class="icon"><use href="#i-chevron-left"/></svg>
 *       </button>
 *       <span class="pagination-v2__page-info">
 *         Страница <input class="pagination-v2__page-input" type="number" min="1" value="1"> из 25
 *       </span>
 *       <button class="pagination-v2__btn" aria-label="Следующая страница">
 *         <svg class="icon"><use href="#i-chevron-right"/></svg>
 *       </button>
 *       <button class="pagination-v2__btn" aria-label="Последняя страница">
 *         <svg class="icon"><use href="#i-chevrons-right"/></svg>
 *       </button>
 *     </div>
 *   </div>
 */

/* ── Root container ── */
.pagination-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

/* ── Record count label ── */
.pagination-v2__info {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Controls cluster ── */
.pagination-v2__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── Icon button ── */
.pagination-v2__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-base);
  background: var(--surface-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  flex-shrink: 0;
}

.pagination-v2__btn:hover:not(:disabled) {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.pagination-v2__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-500);
}

.pagination-v2__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── "Page X of Y" label ── */
.pagination-v2__page-info {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;               /* monospace-adjacent — intentional raw px */
  font-family: var(--font-mono);
  color: var(--text-primary);
  white-space: nowrap;
  padding: 0 var(--space-1);
}

/* ── Narrow number input for jumping to page ── */
.pagination-v2__page-input {
  width: 44px;
  padding: 3px var(--space-2);
  background: var(--surface-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-align: center;
  -moz-appearance: textfield;     /* hide spinners in Firefox */
}

.pagination-v2__page-input::-webkit-inner-spin-button,
.pagination-v2__page-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pagination-v2__page-input:focus-visible {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 768px) {
  .pagination-v2 {
    justify-content: center;
  }

  .pagination-v2__info {
    width: 100%;
    text-align: center;
  }
}