/* Pagination banner — reusable, themed, CSP-clean.
   A first-party stylesheet (no injected <style>, no inline style attributes;
   the component only writes via CSSOM). Themed with the app design tokens and
   dark-mode aware via the .dark class, so it matches DynamicTable and the rest
   of the UI. Adapted from the project's ITX_Pagination widget, with FontAwesome
   replaced by inline SVG icons. */

.pg-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--color-warmgray-500);
}
.dark .pg-banner { color: var(--color-warmgray-300); }

.pg-banner b { color: var(--color-warmgray-700); font-weight: 600; }
.dark .pg-banner b { color: var(--color-warmgray-100); }

/* Icon buttons (first / prev / next / last / export) */
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: none; background: transparent; border-radius: 6px; cursor: pointer;
  color: var(--color-warmgray-500); transition: background .12s, color .12s;
}
.pg-btn:hover { background: var(--color-warmgray-100); color: var(--color-blue-700); }
.dark .pg-btn { color: var(--color-warmgray-300); }
.dark .pg-btn:hover { background: var(--color-warmgray-700); color: var(--color-blue-200); }
.pg-btn svg { width: 1rem; height: 1rem; display: block; pointer-events: none; }

/* Disabled nav button: visible but inert. */
.pg-btn.pg-disabled { opacity: .35; pointer-events: none; }

/* Sort toggle buttons share the icon-button look; active gets the brand colour. */
.pg-sort.pg-active { color: var(--color-blue-600); background: var(--color-blue-50); }
.dark .pg-sort.pg-active { color: var(--color-blue-200); background: color-mix(in srgb, var(--color-blue-900) 40%, transparent); }

/* Thin vertical separator between groups. */
.pg-sep {
  width: 1px; align-self: stretch; min-height: 1.25rem;
  background: var(--color-warmgray-200); margin: 0 .25rem;
}
.dark .pg-sep { background: var(--color-warmgray-700); }

.pg-label { white-space: nowrap; }

/* Page-size <select>: reuse the app control look + custom chevron (.app-select
   lives in tailwind.css). Compact height to fit the banner. */
.pg-size {
  height: 1.75rem; padding: 0 1.5rem 0 .5rem; font-size: .8125rem;
  border-radius: 6px; border: 1px solid var(--color-warmgray-200);
  background-color: var(--color-warmgray-50); color: var(--color-warmgray-700);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .4rem center; background-size: .85rem;
}
.pg-size::-ms-expand { display: none; }
.dark .pg-size {
  border-color: var(--color-warmgray-600);
  background-color: color-mix(in srgb, var(--color-warmgray-900) 40%, transparent);
  color: var(--color-warmgray-100);
}
.pg-size:focus { outline: none; box-shadow: 0 0 0 2px var(--color-blue-500); }

.pg-spacer { flex: 1; }