.pagination-wrapper {
    margin-bottom: 10px;
}

/* Container for pagination navigation */
.pagination-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  /* Container for pagination controls on smaller screens */
  .pagination-controls {
    display: flex;
    justify-content: space-between;
    flex: 1;
  }
  
  @media (min-width: 640px) { /* sm: */
    .pagination-controls {
      display: none; /* Hide on small screens */
    }
  }
  
  /* Container for pagination information on larger screens */
  .pagination-info {
    display: none; /* Hide on small screens */
    gap: 20px;
  }
  
  @media (min-width: 640px) { /* sm: */
    .pagination-info {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
    }
  }
  
  /* Pagination text */
  .pagination-text {
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
    line-height: 1.25rem; /* leading-5 */
  }
  
  .dark .pagination-text {
    color: #9ca3af; /* dark:text-gray-400 */
  }
  
  .pagination-text-bold {
    font-weight: 500; /* font-medium */
  }
  
  /* Pagination button */
  .pagination-button {
    position: relative; /* relative */
    display: inline-flex; /* inline-flex */
    align-items: center; /* items-center */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    line-height: 1.25rem; /* leading-5 */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 150ms ease-in-out; /* transition ease-in-out duration-150 */
  }
  
  .pagination-button:hover {
    color: #6b7280; /* hover:text-gray-500 */
  }
  
  .pagination-button:focus {
    outline: none; /* focus:outline-none */
    border-color: #93c5fd; /* focus:border-blue-300 */
    box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.5); /* focus:ring ring-gray-300 */
  }
  
  .pagination-button:active {
    background-color: #f3f4f6; /* active:bg-gray-100 */
    color: #374151; /* active:text-gray-700 */
  }
  
  /* Dark mode styles */
  .dark .pagination-button {
    background-color: #1f2937; /* dark:bg-gray-800 */
    border-color: #4b5563; /* dark:border-gray-600 */
    color: #d1d5db; /* dark:text-gray-300 */
  }
  
  .dark .pagination-button:focus {
    border-color: #3b82f6; /* dark:focus:border-blue-700 */
  }
  
  .dark .pagination-button:active {
    background-color: #374151; /* dark:active:bg-gray-700 */
    color: #d1d5db; /* dark:active:text-gray-300 */
  }
  
  /* Disabled pagination button */
  .pagination-button-disabled {
    position: relative; /* relative */
    display: inline-flex; /* inline-flex */
    align-items: center; /* items-center */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-500 */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    cursor: default; /* cursor-default */
    line-height: 1.25rem; /* leading-5 */
    border-radius: 0.375rem; /* rounded-md */
  }
  
  .dark .pagination-button-disabled {
    color: #4b5563; /* dark:text-gray-600 */
    background-color: #1f2937; /* dark:bg-gray-800 */
    border-color: #4b5563; /* dark:border-gray-600 */
  }
  
  .pagination-button-next {
    margin-left: 0.75rem; /* ml-3 */
  }
  
  .pagination-button-icon {
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
  }
  
  .pagination-button-icon.pagination-button-next-icon {
    border-radius: 0 0.375rem 0.375rem 0; /* rounded-r-md */
  }
  
  .pagination-button-icon.pagination-button-next-icon-disabled {
    border-radius: 0 0.375rem 0.375rem 0; /* rounded-r-md */
  }
  
  .icon {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
  }
  
  /* Pagination list */
  .pagination-list {
    position: relative; /* relative */
    display: inline-flex; /* inline-flex */
    align-items: center; /* items-center */
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    line-height: 1.25rem; /* leading-5 */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 150ms ease-in-out; /* transition ease-in-out duration-150 */
  }
  
  .pagination-list .pagination-button {
    margin-left: -1px; /* -ml-px */
  }
  
  .pagination-list .pagination-button-icon {
    margin-left: -1px; /* -ml-px */
  }