/**
 * INFOBMS unified pagination design system
 * Covers: Bootstrap 3/4, Laravel vendor views, DataTables, custom .pagination
 * Tokens: --pos-paginate-* (mapped from theme surfaces + --btn-primary-bg)
 * Load after theme-components / dark-mode so this file is the single source of truth.
 */

/* ── Token aliases (light defaults; dark overridden via body.dark-mode in theme-tokens) ── */
:root {
  --pos-paginate-bg: var(--pos-bg-surface, var(--bg-card, #ffffff));
  --pos-paginate-bg-hover: var(--pos-bg-surface-alt, var(--bg-table-alt, #f8f9fa));
  --pos-paginate-bg-disabled: var(--pos-bg-surface-alt, var(--bg-table-alt, #f8f9fa));
  --pos-paginate-border: var(--pos-border, var(--border-color, #dee2e6));
  --pos-paginate-text: var(--pos-text-link, var(--text-link, var(--btn-primary-bg, #3b82f6)));
  --pos-paginate-text-hover: var(--pos-text-primary, var(--text-primary, #111827));
  --pos-paginate-text-disabled: var(--pos-text-disabled, var(--text-muted, #9ca3af));
  --pos-paginate-active-bg: var(--btn-primary-bg, var(--pos-dt-paginate-active, #3b82f6));
  --pos-paginate-active-hover: var(--btn-primary-hover, var(--btn-primary-bg, #60a5fa));
  --pos-paginate-active-text: var(--text-on-primary, var(--pos-dt-paginate-active-text, #ffffff));
  --pos-paginate-focus-ring: var(--pos-border-focus, rgba(128, 189, 255, 0.45));
}

body.dark-mode {
  --pos-paginate-bg: var(--pos-bg-surface, var(--bg-card, #1a1d27));
  --pos-paginate-bg-hover: var(--pos-bg-surface-raised, var(--bg-table-alt, #2d3147));
  --pos-paginate-bg-disabled: var(--bg-sidebar, #13161f);
  --pos-paginate-border: var(--pos-border, var(--border-color, #3d4460));
  --pos-paginate-text: var(--pos-text-link, var(--text-link, #60a5fa));
  --pos-paginate-text-hover: var(--pos-text-primary, var(--text-primary, #e2e8f0));
  --pos-paginate-text-disabled: var(--pos-text-muted, var(--text-muted, #64748b));
  --pos-paginate-active-bg: var(--btn-primary-bg, var(--pos-dt-paginate-active));
  --pos-paginate-active-hover: var(--btn-primary-hover, var(--btn-primary-bg));
  --pos-paginate-active-text: var(--text-on-primary, var(--btn-text-on-filled, #ffffff));
  --pos-paginate-focus-ring: var(--pos-border-focus, rgba(96, 165, 250, 0.45));
}

/* ── Wrappers: never paint a white strip ── */
ul.pagination,
.dataTables_paginate,
.dataTables_wrapper .dataTables_paginate,
.sf2-pagination ul.pagination,
.pagination.pagination_ajax {
  background: transparent !important;
  background-color: transparent !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  max-width: 100%;
}

/* ── Shared idle state (BS4 page-link, BS3 anchors, DT buttons + inner a/span) ── */
.page-link,
.pagination > li > a,
.pagination > li > span,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_paginate .paginate_button,
.dataTables_paginate .paginate_button > a,
.dataTables_paginate .paginate_button > span,
.paginate_button {
  background-color: var(--pos-paginate-bg) !important;
  border-color: var(--pos-paginate-border) !important;
  color: var(--pos-paginate-text) !important;
  box-shadow: none !important;
}

/* ── Hover (non-active, non-disabled) ── */
.page-link:hover,
.page-item:not(.active):not(.disabled) .page-link:hover,
.pagination > li:not(.active):not(.disabled) > a:hover,
.pagination > li:not(.active):not(.disabled) > span:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current):not(.active),
.paginate_button:hover:not(.disabled):not(.current):not(.active),
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current):not(.active) > a,
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current):not(.active) > span {
  background-color: var(--pos-paginate-bg-hover) !important;
  border-color: var(--pos-paginate-border) !important;
  color: var(--pos-paginate-text-hover) !important;
  box-shadow: none !important;
}

/* ── Active / current (scheme primary) ── */
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.paginate_button.current,
.paginate_button.current:hover,
.paginate_button.active,
.dataTables_paginate .paginate_button.current > a,
.dataTables_paginate .paginate_button.active > a,
.dataTables_paginate .paginate_button.current > span,
.dataTables_paginate .paginate_button.active > span {
  background-color: var(--pos-paginate-active-bg) !important;
  background-image: none !important;
  border-color: var(--pos-paginate-active-bg) !important;
  color: var(--pos-paginate-active-text) !important;
  box-shadow: none !important;
}

.page-item.active .page-link:hover,
.pagination > .active > a:hover,
.paginate_button.current:hover,
.dataTables_paginate .paginate_button.current:hover > a {
  background-color: var(--pos-paginate-active-hover) !important;
  border-color: var(--pos-paginate-active-hover) !important;
  color: var(--pos-paginate-active-text) !important;
}

/* ── Disabled ── */
.page-item.disabled .page-link,
.page-item.disabled .page-link:hover,
.page-item.disabled .page-link:focus,
.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.paginate_button.disabled,
.paginate_button.disabled:hover,
.dataTables_paginate .paginate_button.disabled > a,
.dataTables_paginate .paginate_button.disabled > span {
  background-color: var(--pos-paginate-bg-disabled) !important;
  border-color: var(--pos-paginate-border) !important;
  color: var(--pos-paginate-text-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.65 !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* ── Focus (keyboard) ── */
.page-link:focus,
.pagination > li > a:focus,
.pagination > li > span:focus,
.paginate_button:focus,
.dataTables_paginate .paginate_button:focus,
.dataTables_paginate .paginate_button > a:focus {
  outline: 2px solid var(--pos-paginate-active-bg) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--pos-paginate-focus-ring) !important;
  z-index: 2;
}

/* ── Previous / Next affordance ── */
.paginate_button.previous,
.paginate_button.next,
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
  background-color: var(--pos-paginate-bg) !important;
  border-color: var(--pos-paginate-border) !important;
  color: var(--pos-paginate-text) !important;
}

.paginate_button.previous:hover:not(.disabled),
.paginate_button.next:hover:not(.disabled),
.paginate_button.previous:hover:not(.disabled) > a,
.paginate_button.next:hover:not(.disabled) > a {
  background-color: var(--pos-paginate-active-bg) !important;
  border-color: var(--pos-paginate-active-bg) !important;
  color: var(--pos-paginate-active-text) !important;
}

/* ── Mobile / touch ── */
@media (max-width: 576px) {
  ul.pagination,
  .dataTables_paginate,
  .dataTables_wrapper .dataTables_paginate {
    justify-content: center;
    row-gap: 0.35rem;
  }

  .page-link,
  .pagination > li > a,
  .pagination > li > span,
  .paginate_button,
  .dataTables_paginate .paginate_button > a {
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.4rem 0.65rem !important;
  }
}