/* se-pagination — paginarea familiei, una singură pentru amândouă consolele.
 *
 * Forma vine din prototipuri, unde designul a făcut-o IDENTICĂ byte cu byte:
 * r2/apps/external/scanexpert-Centrala-2/index.html L953-966 este exact
 * r2/apps/external/scanexpert-backoffice/index.html L907-920. Baza `.pagination`
 * este Centrala L946-948; BackOffice L606-608 este aceeași, fără `margin-top`
 * (acolo marginea o pune `.table-footer`), deci marginea rămâne aici, unde
 * containerul stă singur sub tabel.
 *
 * Fiecare culoare este un token canonic `--se-*`, tradusă prin
 * `design-kit/dialect.json`: #faebef = secondary-10, --accent-pink-soft =
 * secondary-20, --input-border = border-default, --text-heading = text-title,
 * --btn-disabled-text = primary-20, #f9f9fa = bg-canvas, --placeholder =
 * text-placeholder.
 *
 * UNDE SE ABATE DE LA PROTOTIP, INTENȚIONAT — trei locuri, toate din aceleași
 * reguli de casă pe care le respectă și se-select.css:
 *
 *   1. FOCUSUL nu se scrie aici. Prototipul stinge conturul (`outline:none`) și
 *      îngroașă bordura de la 1px la 2px, ceea ce mișcă așezarea pastilei sub
 *      deget. Amândouă consolele desenează deja tratamentul de familie pe orice
 *      element focusabil — contur 2px primary-60, offset 2px, halo 4px
 *      focus-ring — deci pastilele îl primesc fără nicio regulă în plus. A-l
 *      rescrie aici ar fi a doua copie a aceluiași adevăr; ce se face este
 *      omiterea lui `outline:none`.
 *   2. SPECIFICITATEA. În prototip `.pagination button` este (0,1,1) și bate un
 *      `.page-num` (0,1,0), deci regula variantei cu text repictează pastila
 *      numerotată: raza de pastilă peste cercul de 44px, padding 6px 14px peste
 *      0 și opacitatea de la `:disabled` peste culoarea de token. Aici cele două
 *      variante sunt despărțite la rădăcină — varianta cu text se scrie doar pe
 *      un container care NU este `.pagination-numbered` — iar regulile de pastilă
 *      pornesc de la `.pagination`, ca starea componentei numite să câștige pe
 *      specificitate, nu pe ordinea din fișier.
 *   3. Orice `:hover` care scrie un fundal scrie și o culoare de text, chiar când
 *      culoarea e aceeași cu cea din starea normală: altfel butonul generic al
 *      consolei rămâne dedesubt cu litera lui.
 */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--se-space-12);
  margin-top: var(--se-space-16);
  font-size: var(--se-type-bodyreg-size);
  color: var(--se-color-text-description);
}

/* Varianta cu text („Anterioară" / „Următoarea"), pentru listele care n-au trecut
 * încă la pastile numerotate. `:not(.pagination-numbered)` este despărțitura de la
 * punctul 2 din antet — fără ea, regula asta ajunge pe fiecare pastilă. */
.pagination:not(.pagination-numbered) button {
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  padding: 6px var(--se-space-14);
  color: var(--se-color-primary-60);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--se-type-bodymed-weight);
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-4);
  cursor: pointer;
}

.pagination:not(.pagination-numbered) button:hover:not(:disabled) {
  background: var(--se-color-bg-console);
  border-color: var(--se-color-border-strong);
  color: var(--se-color-primary-60);
}

.pagination:not(.pagination-numbered) button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- varianta numerotată (Figma „Paginare", node 563:12315) ---------------------
 * Pastilele au bordura mereu vizibilă, nu doar pagina curentă; săgețile n-au nici
 * bordură, nici fundal cât timp sunt active și capătă amândouă doar la disabled. */

.pagination-numbered {
  gap: var(--se-space-16);
}

.page-num-group {
  display: flex;
  align-items: center;
  gap: var(--se-space-4);
}

.pagination .page-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  color: var(--se-color-text-title);
  font-family: inherit;
  font-size: var(--se-type-bodyreg-size);
  font-weight: var(--se-type-bodyreg-weight);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.pagination .page-num:hover:not(:disabled) {
  background: var(--se-color-secondary-10);
  border-color: var(--se-color-secondary-10);
  color: var(--se-color-text-title);
}

.pagination .page-num:active:not(:disabled) {
  background: var(--se-color-secondary-20);
  border-color: var(--se-color-secondary-20);
  color: var(--se-color-text-title);
}

/* Pagina curentă: fundalul treptei 10, inelul treptei 20 — două trepte diferite,
 * ca pastila aleasă să se citească și când mausul stă pe vecina ei. */
.pagination .page-num.active,
.pagination .page-num.active:hover:not(:disabled) {
  background: var(--se-color-secondary-10);
  border-color: var(--se-color-secondary-20);
  color: var(--se-color-text-title);
}

.pagination .page-num:disabled {
  background: var(--se-color-bg-canvas);
  border-color: var(--se-color-border-default);
  color: var(--se-color-text-placeholder);
  cursor: not-allowed;
}

.pagination .page-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  color: var(--se-color-text-title);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.pagination .page-nav:hover:not(:disabled) {
  background: var(--se-color-border-default);
  border-color: var(--se-color-border-default);
  color: var(--se-color-text-title);
}

/* Săgeata stinsă se scrie cu un token de culoare, nu cu `opacity`: opacitatea
 * stinge deopotrivă litera și fundalul de sub ea, deci contrastul rezultat nu e
 * o valoare pe care s-o poată citi cineva din foaia de stări. */
.pagination .page-nav:disabled {
  color: var(--se-color-primary-20);
  cursor: not-allowed;
}

.pagination-ellipsis {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--se-color-text-title);
}

/* Săgețile sunt desenate de se-pagination.js ca SVG în linie, nu ca iconiță de
 * font și nu dintr-un sprite: BackOffice-ul are fontul Phosphor, Centrala are un
 * sprite `<symbol>`, iar un fișier comun nu poate cere niciunul dintre ele. Conturul
 * e chiar caret-left/right din Phosphor, deci glifa e aceeași în amândouă. */
.pagination .page-nav .se-pagination-ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: 0 0 auto;
  display: block;
}