/* Pagination */
@layer components {
  .pagy {
    @apply flex items-center justify-center space-x-2 font-medium text-sm;
  }

  .pagy a:not(.gap) {
    @apply relative inline-flex items-center px-4 py-2 rounded-lg border transition-all duration-200 min-w-[40px] justify-center;
  }

  .pagy a:not(.gap):hover {
    @apply border-indigo-300 bg-indigo-50 text-indigo-600 shadow-sm;
  }

  .pagy a:not(.gap):focus {
    @apply outline-none ring-2 ring-indigo-500 ring-offset-2;
  }

  .pagy a:not(.gap):not([href]) {
    @apply text-gray-300 bg-gray-50 border-gray-200 cursor-not-allowed shadow-none;
  }

  .pagy a:not(.gap):not([href]):hover {
    @apply bg-gray-50 border-gray-200 text-gray-300;
  }

  .pagy a.current {
    @apply text-white bg-indigo-600 border-indigo-600 shadow-sm;
  }

  .pagy a.current:hover {
    @apply bg-indigo-700 border-indigo-700 text-white;
  }

  .pagy .prev,
  .pagy .next {
    @apply px-3;
  }

  .pagy .gap {
    @apply px-2 text-gray-500;
  }

  .pagy label {
    @apply inline-flex items-center px-3 py-2 text-gray-600 bg-gray-50 rounded-lg border border-gray-200;
  }

  .pagy label input {
    @apply ml-2 w-16 px-2 py-1 text-center bg-white border border-gray-300 rounded focus:border-indigo-500 focus:ring-indigo-500;
  }

  .pagy .pagy-info {
    @apply text-sm text-gray-600;
  }

  @media (max-width: 640px) {
    .pagy {
      @apply space-x-1;
    }

    .pagy a:not(.gap) {
      @apply px-3 min-w-[36px];
    }
  }
}