/**
 * DigiknackPagination — compact table pager (Prev / status / Next / page size).
 * Uses DigiknackBtn + DigiknackSelect. Cream 12px type throughout.
 * Pair with public/js/dk-pagination.js (window.DigiknackPagination).
 *
 *   <nav class="dk-pagination" aria-label="Pages">
 *     <button type="button" class="dk-btn dk-btn--ghost dk-pagination__btn">…</button>
 *     <p class="dk-pagination__status">1–20 of 100 · Page 1 / 5</p>
 *     <button type="button" class="dk-btn dk-btn--ghost dk-pagination__btn">…</button>
 *     <label class="dk-pagination__size">
 *       <select class="contact-input" data-dk-select>…</select>
 *     </label>
 *   </nav>
 */

.dk-pagination {
  --dk-pagination-ink: var(--admin-nav-idle, #e3dbcc);
  --dk-pagination-muted: rgba(227, 219, 204, 0.55);
  --dk-pagination-accent: var(--cal-accent, #f2133c);
  --dk-pagination-size: 12px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--dk-pagination-size);
  font-weight: 400;
  line-height: 1.2;
  color: var(--dk-pagination-ink);
}

.dk-pagination__status {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--dk-pagination-size);
  font-weight: 400;
  color: var(--dk-pagination-ink);
  letter-spacing: 0;
  white-space: nowrap;
}

.dk-pagination .dk-btn,
.dk-pagination .dk-pagination__btn {
  font-size: var(--dk-pagination-size);
  font-weight: 400;
  color: var(--dk-pagination-ink);
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  text-transform: none;
  letter-spacing: 0;
}

.dk-pagination .dk-btn span,
.dk-pagination .dk-pagination__btn span {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.dk-pagination .dk-btn__icon {
  width: 12px;
  height: 12px;
  color: var(--dk-pagination-accent);
}

.dk-pagination .dk-btn:hover,
.dk-pagination .dk-pagination__btn:hover {
  color: var(--dk-pagination-ink);
}

.dk-pagination .dk-btn:hover .dk-btn__icon,
.dk-pagination .dk-pagination__btn:hover .dk-btn__icon {
  transform: none;
  color: var(--dk-pagination-accent);
}

.dk-pagination .dk-btn:disabled,
.dk-pagination .dk-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dk-pagination__size {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  min-width: 0;
}

.dk-pagination .dk-select,
.dk-pagination .dk-select__trigger,
.dk-pagination .dk-select__face,
.dk-pagination .dk-select__value,
.dk-pagination .contact-input {
  font-size: var(--dk-pagination-size);
  font-weight: 400;
  color: var(--dk-pagination-ink);
  line-height: 1.2;
}

.dk-pagination .dk-select__face {
  gap: 4px;
}

.dk-pagination .dk-select__icon {
  width: 12px;
  height: 12px;
  color: var(--dk-pagination-accent);
}

.dk-pagination .dk-select__value.is-placeholder {
  color: var(--dk-pagination-muted);
}