/* One pager, everywhere.

   Two things share this file because they must look identical:
   `.pager`  — the server-rendered paginator (resources/views/vendor/pagination/tuqqa.blade.php)
   `.tqp`    — the pager js/table-pagination.js builds for dashboard tables and card grids.

   Page sizes come from the console; see App\Support\PaginationSettings. */

.pager, .tqp {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 14px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line, #e4e9ef);
}

.pager-count, .tqp-count {
  margin: 0; font-size: 12px; font-weight: 650;
  color: var(--muted, #6a7075); font-variant-numeric: tabular-nums;
}

.pager-list, .tqp-list {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 5px; list-style: none; margin: 0; padding: 0;
  margin-inline-start: auto;
}

.pager-link, .tqp-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 36px; height: 36px; padding: 0 11px;
  border: 1px solid var(--line, #e4e9ef); border-radius: 9px;
  background: var(--card, #fff); color: var(--navy, #0c3b68);
  font: inherit; font-size: 12.5px; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

a.pager-link:hover, .tqp-link:not(:disabled):not(.is-on):hover {
  background: var(--sky, #e8f2fb);
  border-color: var(--blue, #1c7ac4);
  color: var(--blue2, #0f5391);
}

.pager-link:focus-visible, .tqp-link:focus-visible {
  outline: 2px solid var(--blue, #1c7ac4); outline-offset: 2px;
}

.pager-link.is-on, .tqp-link.is-on {
  background: linear-gradient(135deg, var(--blue, #1c7ac4), var(--blue2, #0f5391));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(28, 122, 196, .24);
  cursor: default;
}

/* A step that has nowhere to go stays in place rather than disappearing, so
   the row does not shuffle sideways as pages change. */
.pager-link.is-off, .tqp-link:disabled {
  color: #9aa6b2; background: var(--soft, #f8fafc);
  cursor: not-allowed; opacity: .75;
}

.pager-gap, .tqp-gap {
  padding: 0 4px; color: var(--muted, #6a7075);
  font-size: 12.5px; font-weight: 750; user-select: none;
}

/* ‹ and › are not mirrored by the bidi algorithm, so flip them for Urdu. */
[dir="rtl"] .pager-arrow, [dir="rtl"] .tqp-arrow { display: inline-block; transform: scaleX(-1); }

/* js/table-pagination.js hides with a class of its own, so a row another
   script filtered out (`hidden`, or an inline display) stays filtered. */
.tqp-hidden { display: none !important; }

/* A pager belongs to its table, not to the scroll box inside it. */
.table-wrap + .tqp, .tblwrap + .tqp { margin-top: 12px; }

@media (max-width: 640px) {
  .pager, .tqp { justify-content: center; }
  .pager-count, .tqp-count { width: 100%; text-align: center; }
  .pager-list, .tqp-list { margin-inline-start: 0; justify-content: center; }
  /* Keep Previous / Next reachable by thumb; the numbers do the shrinking. */
  .pager-word, .tqp-word { display: none; }
  .pager-step, .tqp-step { min-width: 40px; padding: 0 12px; font-size: 16px; }
}