/* ==========================================================================
   vth-pagination — the reskin's pager (js/vth-reskin/vth-pagination.js)

   The reference puts the summary hard left and the pager hard right on the card's
   bottom row; `.vth-lfoot` already does that with space-between. These rules are the
   control itself, so any panel that drops in <vth-pagination> gets the same one.
   ========================================================================== */
.vth .vth-pager{display:flex;align-items:center;gap:6px;}
/* 40px square, 8px round — the same cell the reference's page buttons use, so the
   chevrons and the page box read as one row of controls. */
.vth .vth-pager__btn{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;margin:0;padding:0;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--surface-card);color:var(--text-secondary);
  cursor:pointer;transition:background .12s ease,border-color .12s ease;}
.vth .vth-pager__btn:hover:not([disabled]){background:var(--surface-muted);
  border-color:var(--border-default);}
.vth .vth-pager__btn[disabled]{opacity:.4;cursor:default;}
.vth .vth-pager__btn i{font-size:18px;line-height:1;}
/* "Page [n] of N" — one group, so the words stay tied to the box between them. */
.vth .vth-pager__pos{display:inline-flex;align-items:center;gap:8px;
  padding:0 var(--space-2);
  font-size:var(--type-size-xs);color:var(--text-subtle);white-space:nowrap;}
.vth .vth-pager__word{font-size:var(--type-size-xs);color:var(--text-subtle);}
/* The current page is the filled blue cell in the reference — here it is also the
   input, so it carries that treatment rather than sitting as a bare field. */
/* NAMED WITH THE ELEMENT, and that is not decoration: Materialize styles text inputs
   through `input[type=text]:not(.browser-default)`, which scores (0,2,1). A plain
   `.vth .vth-pager__input` is (0,2,0) and loses — the box rendered transparent with
   dark ink instead of the filled blue cell. `.vth .vth-pager input.vth-pager__input`
   is (0,3,1): class count is compared first, so three classes beat two. */
.vth .vth-pager input.vth-pager__input{width:44px;height:40px;margin:0;padding:0;
  border:1px solid var(--vth-blue) !important;border-radius:var(--radius-md);
  background:var(--vth-blue);box-shadow:none !important;
  font-family:var(--font-sans);font-size:var(--type-size-xs);
  font-weight:var(--weight-semibold);color:var(--text-on-blue);text-align:center;
  -moz-appearance:textfield;}
.vth .vth-pager input.vth-pager__input:focus{border-color:var(--vth-blue-hover) !important;
  background:var(--vth-blue-hover);box-shadow:none !important;}
.vth .vth-pager input.vth-pager__input::-webkit-outer-spin-button,
.vth .vth-pager input.vth-pager__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

@media (max-width:560px){
  .vth .vth-pager__pos{padding:0 4px;}
}