/**
 * TransferJet — pagination.
 *
 * Styling only. Hyvä's html/pager.phtml already gives us everything needed:
 * semantic classes, aria-current="page" on the current page, aria-disabled on
 * an unavailable prev/next, and arrowLeft/arrowRight icons whose paths are the
 * same long-shaft arrows the Laravel frontend uses. No template override.
 *
 * Adapted from the Laravel paginator: 48px roundels, and the current page
 * filled and set apart by a white gap and a ring rather than merely being a
 * darker circle. The gap is what makes it read as ringed.
 *
 * Three structural facts this depends on, all of which caught a first pass out:
 *
 *   - prev and next are DIRECT CHILDREN of nav.pages. Only the numbered pages
 *     sit in <li class="item"> inside an <ol>, so a selector scoped to .item
 *     misses the arrows entirely.
 *   - the count comes from toolbar/amount.phtml and the page-size control from
 *     toolbar/limiter.phtml. Both are SIBLINGS of the pager inside
 *     .toolbar-products, not children of .pager.
 *   - amount.phtml already wraps each figure in <span class="toolbar-number">,
 *     so the numerals can be emphasised without touching the translation.
 */

/* Wrapping at every width, not just on phones.
 *
 * Hyvä's toolbar is a grid — grid-cols-4 sm:grid-cols-8 md:grid-cols-4
 * lg:grid-cols-8 — with the count at col-span-2, the pages at col-span-4 and
 * the limiter at col-span-2. From sm to md all three share one row of eight, so
 * the pager holds half the width: roughly 340px at a 683px viewport. Eight
 * roundels at 48px plus gaps needs about 440, and an unwrapped flex row spills
 * sideways over both neighbours instead of breaking.
 *
 * Wrapping contains it inside its own cell. Two centred lines is not ideal in
 * that band, but it is a layout rather than a collision. */
.pages,
.pages > ol {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.pages .item > a,
.pages > a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    color: var(--color-primary);
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    min-width: 48px;
    padding: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    width: 48px;
}

/* Lifted a pixel on hover, as the Laravel component does, and filled. The lift
   alone is easy to miss on the arrows, which carry a glyph rather than a
   numeral and so have less ink to move. The fill is the same grey used on the
   search pill and the mobile menu trigger — one colour for "a control under the
   pointer". */
.pages .item > a:hover,
.pages > a:hover {
    background: #f2f2f2;
    border-color: #cfcdcb;
    box-shadow: 0 3px 8px rgb(0 0 0 / 0.10);
    transform: translateY(-1px);
}

/* The current page: filled, then a white gap, then the ring. Two properties
   doing one job — the border draws the gap inside the circle and the shadow
   draws the ring outside it, both following the radius. */
.pages .item > a[aria-current="page"] {
    background: var(--color-primary);
    border-color: #fff;
    border-width: 2px;
    box-shadow: 0 0 0 2px var(--color-primary);
    color: #fff;
}

/* No lift on the current page: the ring and a lift shadow fight each other,
   and there is nowhere to navigate to. */
.pages .item > a[aria-current="page"]:hover {
    background: var(--color-primary);
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--color-primary);
    transform: none;
}

/* The skip-ahead links stay roundels rather than becoming a plain ellipsis:
   they are real links that jump a frame of pages, and something clickable
   should not be dressed as punctuation. */
.pages .item > a.jump {
    font-weight: 400;
}

/* Prev and next when there is nowhere to go. */
.pages > a[aria-disabled="true"] {
    border-color: #e5e3e1;
    box-shadow: none;
    color: #a8a5a3;
}

.pages > a[aria-disabled="true"]:hover {
    background: #fff;
    border-color: #e5e3e1;
    box-shadow: none;
    transform: none;
}

/* ---------------------------------------------------------------------------
   The flanks.

   15px rather than 16: at 16 they sit level with the roundels' own numerals and
   the row flattens into three things of equal weight. A step below lets the
   roundels lead. It also matches the filter panel's option labels, so the
   toolbars either side of the grid agree.
   --------------------------------------------------------------------------- */

.toolbar-products .toolbar-amount {
    color: #1f1a16;
    font-size: 0.9375rem;
}

/* The figures are what anyone actually reads; the words around them are
   scaffolding. amount.phtml marks them up for us. */
.toolbar-products .toolbar-amount .toolbar-number {
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   The pager always takes a row of its own.

   Hyvä's toolbar runs grid-cols-4 sm:grid-cols-8 md:grid-cols-4 lg:grid-cols-8,
   with the count at col-span-2, the pager's wrapper at col-span-4 and the
   limiter at col-span-2. At sm and again at lg that puts all three on one row
   and gives the pager half the width.

   Half of what, though, is the problem. The toolbar sits inside the content
   column, not the page — so with a filter sidebar taking roughly a quarter,
   half of col-span-4 is around 395px at a 1100px viewport. Eight roundels plus
   gaps need about 384. It fits or it does not depending on the sidebar, the
   category and how many pages there are, and when it does not the arrows wrap
   onto their own lines above and below the numbers.

   Rather than chase that per breakpoint, the pager gets a full row at every
   width, with the count and limiter on the row above it. Predictable
   everywhere, no collision anywhere.

   Above rather than below: the count says how far through the list you are, so
   it belongs between the products and the control that moves you through them.
   The roundels then sit last, closest to the foot of the page where the thumb
   or the eye ends up.

   getUseContainer() is false on this pager, so there is no .pager wrapper to
   target — the div holding nav.pages is a direct child of the toolbar grid and
   carries no distinguishing class of its own. :has() is the hook.
   --------------------------------------------------------------------------- */

.toolbar-products > div:has(> .pages) {
    grid-column: 1 / -1;
    order: 1;
}

/* One layout at every width. The per-breakpoint version was abandoned: the
   toolbar's grid gives the pager half the content column at sm and lg, and
   whether that is enough depends on the sidebar and the page count, so the
   same viewport behaved differently on different pages.

   The limiter goes entirely — 24 per page everywhere. That removes the only
   route to changing the page size, which is a capability lost rather than
   hidden, and a deliberate trade for a layout that is the same on every
   screen. */
.toolbar-products .limiter {
    display: none;
}

.toolbar-products .toolbar-amount {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 1.5rem;
    order: 0;
    text-align: center;
}

.pages {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   The leading control.

   One labelled pill at all times, on whichever side can actually be used: next
   while there are pages ahead, previous once there are not. The pill's arrow
   points the way it goes, so it always describes an available move rather than
   representing an unavailable one.

   All of it is CSS. The only place the DOM records "this is the last page" is
   aria-disabled on the next control, and :has() reaches the previous control
   from there.
   --------------------------------------------------------------------------- */

.pages > a .tj-pager-label {
    display: none;
}

.pages > a:last-child:not([aria-disabled="true"]),
.pages:has(> a:last-child[aria-disabled="true"]) > a:first-child {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    gap: 0.5625rem;
    padding-inline: 1.375rem;
    width: auto;
}

.pages > a:last-child:not([aria-disabled="true"]) .tj-pager-label,
.pages:has(> a:last-child[aria-disabled="true"]) > a:first-child .tj-pager-label {
    display: inline;
    font-size: 0.9375rem;
}

.pages > a:last-child:not([aria-disabled="true"]):hover,
.pages:has(> a:last-child[aria-disabled="true"]) > a:first-child:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* A dead next control would be a labelled pill promising nothing, so it goes
   rather than greys — which also lets the row re-centre on the last page. The
   previous control on page one stays: a faint arrow is unobtrusive, and
   keeping it means the row does not shift when you reach page two. */
.pages > a:last-child[aria-disabled="true"] {
    display: none;
}