/* ============================================
   Admin Pagination - BEM
   ============================================ */
@layer components {
  /* Block: pagination-top */
  .pagination-top,
  .pagination-bottom {
    margin: 1rem 0;
  }

  /* Block: pagy (with modifier: series-nav) */
  .pagy.series-nav {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;

    a {
      padding: 0.5rem 0.75rem;
      border: 1px solid var(--color-border);
      background: var(--color-bg);
      text-decoration: none;
      color: var(--color-primary);
      border-radius: var(--radius-md);
      min-width: 2.5rem;
      text-align: center;
      transition: all var(--transition-fast);
      font-size: var(--font-size-sm);

      &:hover:not([aria-disabled="true"]):not(.current) {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border-dark);
      }

      &.current,
      &[aria-current="page"] {
        background-color: var(--color-primary);
        color: var(--color-bg);
        border-color: var(--color-primary);
        font-weight: 600;
      }

      &[aria-disabled="true"] {
        color: var(--color-text-muted);
        pointer-events: none;
        background-color: var(--color-bg);
        border-color: var(--color-border);
        opacity: 0.5;

        &:not([aria-current="page"]) {
          cursor: not-allowed;
        }
      }
    }
  }
}