.pagination-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  overflow-x: auto; /* Handle overflow gracefully */
}

.pagination-modern-container {
  display: inline-flex; /* Use inline-flex to fit content */
  align-items: center;
  gap: 16px;
  background: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid #eee;
  flex-wrap: nowrap; /* Force no wrap */
}

.pagination-list-modern {
  display: flex;
  list-style: none;
  gap: 6px;
  align-items: center;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

.page-link-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px; /* Slight rounded corners */
  color: #666;
  background-color: transparent;
  text-decoration: none !important;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #eee;
  cursor: pointer;
}

.page-link-modern i {
  font-size: 18px;
  line-height: 1;
}

.page-link-modern:hover {
  color: var(--theme-color, #0d6efd);
  border-color: var(--theme-color, #0d6efd);
  background-color: #fff;
}

.page-link-modern.active {
  background-color: var(--theme-color, #0d6efd);
  color: #fff;
  border-color: var(--theme-color, #0d6efd);
}

.page-link-modern.disabled {
  color: #ccc;
  pointer-events: none;
  border-color: #eee;
  background-color: #f9f9f9;
}

/* Tools Alignment Fixes */
.pagination-tools .input-group {
  align-items: stretch; /* Ensure children take full height */
}

.pagination-tools .form-control,
.pagination-tools .btn {
  height: 32px; /* Match page-link-modern height */
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-tools .form-control {
  /* Input specific fixes */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 14px;
}

/* Polyfill for Bootstrap 5 form-select style in Bootstrap 4 env */
.pagination-tools .form-select {
  display: block;
  width: auto;
  height: 32px;
  padding: 0 2.25rem 0 0.75rem; /* Right padding for arrow */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.pagination-tools .form-select:focus {
  border-color: var(--theme-color, #86b7fe);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15); /* Fallback color */
}

/* Custom scrollbar for container if needed */
.pagination-wrapper::-webkit-scrollbar {
  height: 4px;
}
.pagination-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.pagination-wrapper::-webkit-scrollbar-thumb {
  background: #eee; 
  border-radius: 4px;
}

/* Mobile Optimization */
@media (max-width: 576px) {
  .pagination-modern-container {
     gap: 8px;
     padding: 6px 10px;
  }
  .page-link-modern {
      width: 28px;
      height: 28px;
      font-size: 12px;
  }
  .page-link-modern i {
      font-size: 16px;
  }
  .pagination-tools .form-select {
      padding-right: 24px; /* Compact select */
      background-position: right 0.3rem center;
  }
  #page-jump-input {
      width: 40px !important;
  }
  .pagination-tools .form-control,
  .pagination-tools .btn,
  .pagination-tools .form-select {
      height: 28px; /* Match mobile page-link-modern height */
      font-size: 12px;
  }
}