/* ==========================================================================
   Pagination

   Shared by the public site and the admin, because it is the same control
   doing the same job and a second copy would drift. The two differ only in
   scale and surface, via the --pagination-* variables set per variant.

   Laravel's default paginator is not used anywhere — see the component for
   why. Nothing here depends on a framework: these are the project's own
   tokens.
   ========================================================================== */

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

  /* Per-variant knobs. The public variant overrides them below; anything
     that does not set them gets these, so a new surface is never unstyled. */
  --pagination-size: 40px;
  --pagination-radius: 10px;
  --pagination-font: 0.9375rem;
}

.pagination__count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #53637a);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One box for numbers, edges and the current page alike, so they sit on a
   single baseline whatever the element is. `min-inline-size` rather than a
   fixed width: page 10 must not be narrower than its own digits. */
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-inline-size: var(--pagination-size);
  /* 44px on the public site, per the touch-target rule; the admin sets its
     own compact scale and is a pointer-first surface. */
  min-block-size: var(--pagination-size);
  padding-inline: 10px;
  border: 1px solid var(--color-border, #cdd9e5);
  border-radius: var(--pagination-radius);
  background: var(--color-surface, #fff);
  color: var(--color-text, #0f1b2d);
  font-size: var(--pagination-font);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transition-fast, 150ms ease),
              border-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}

a.pagination__link:hover {
  border-color: var(--color-primary, #0052ba);
  color: var(--color-primary, #0052ba);
}

a.pagination__link:focus-visible {
  outline: 2px solid var(--color-accent, #00a4bc);
  outline-offset: 2px;
}

/* The page you are on. Filled rather than merely tinted: this is the one
   piece of information the control exists to convey, and a border-only
   treatment disappears next to the hover state. */
.pagination__link.is-current {
  border-color: var(--color-primary, #0052ba);
  background: var(--color-primary, #0052ba);
  color: var(--color-on-primary, #fff);
  font-weight: 600;
}

/* Nowhere to go. Rendered as a <span>, so this only has to look inert —
   it already is inert. */
.pagination__link.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.pagination__gap {
  padding-inline: 4px;
  color: var(--color-text-muted, #53637a);
  user-select: none;
}

.pagination__arrow {
  flex: none;
}

/* "Previous" points right in Arabic. The label is already translated; the
   arrow has to follow the layout direction or it contradicts it. */
[dir="rtl"] .pagination__arrow {
  transform: scaleX(-1);
}

/* --- Public ------------------------------------------------------------- */

.pagination--public {
  --pagination-size: 44px;
  --pagination-radius: var(--radius-md, 12px);
  margin-block-start: var(--space-6, 32px);
}

/* --- Admin -------------------------------------------------------------- */

.pagination--admin {
  --pagination-size: 34px;
  --pagination-radius: 8px;
  --pagination-font: 0.875rem;
  margin-block-start: var(--space-4, 16px);
}

/* --- Narrow ------------------------------------------------------------- */

/* Below this the count and the controls stop fitting on one line together.
   The count goes first: it is the sentence that explains the row under it. */
@media (max-width: 560px) {
  .pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination__list {
    justify-content: center;
  }

  /* The words go, the arrows stay. "Previous"/"Next" spelled out costs about
     140px of a 360px row, which is the difference between the numbers fitting
     and the whole control wrapping onto a third line. */
  .pagination__edge-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}