/* Pagination Styles */

/* Common pagination container */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-8) 0;
  flex-wrap: wrap;
}

/* Pagy navigation wrapper */
.pagy-nav,
.pagy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* Individual page links - base styles */
.pagy-nav a,
.pagy-nav span,
.pagy a,
.pagy span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-10);
  height: var(--space-10);
  padding: 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-default);
  transition: all var(--transition-default);
  border: var(--border-width-2) solid transparent;
}

/* Regular page links */
.pagy-nav a,
.pagy a {
  background: var(--color-bg-primary);
  color: var(--color-primary-500);
  border-color: var(--color-border-light);
}

.pagy-nav a:hover,
.pagy a:hover {
  background: var(--color-primary-500);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

/* Current page */
.pagy-nav a.current,
.pagy-nav span.current,
.pagy a.current,
.pagy span.current {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary-600);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-primary-sm);
  cursor: default;
  pointer-events: none;
}

/* Disabled/gap indicators */
.pagy-nav span.disabled,
.pagy-nav span.gap,
.pagy span.disabled,
.pagy span.gap {
  background: transparent;
  color: var(--color-text-light);
  border-color: transparent;
  cursor: default;
}

/* Prev/Next buttons */
.pagy-nav a.prev,
.pagy-nav a.next,
.pagy a.prev,
.pagy a.next {
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--space-4);
}

/* Items per page selector */
.pagy-items-form {
  display: inline-block;
  margin: 0;
}

.pagy-items-form input[type="hidden"] {
  display: none;
}

.pagy.limit-selector {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.pagy-items-label {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  margin: 0;
}

.pagy-items-select {
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border: var(--border-width-2) solid var(--color-border-light);
  border-radius: var(--radius-default);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-default);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233498db' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: var(--space-16);
}

.pagy-items-select:hover {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-primary-sm);
}

.pagy-items-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

/* Admin-specific limit selector */
.admin-panel .pagy.limit-selector {
  color: var(--color-gray-700);
}

.admin-panel .pagy-items-select {
  border-color: var(--color-gray-300);
  color: var(--color-gray-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b82f6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.admin-panel .pagy-items-select:hover {
  border-color: var(--color-info-500);
  box-shadow: var(--shadow-primary-focus);
}

.admin-panel .pagy-items-select:focus {
  border-color: var(--color-info-500);
  box-shadow: 0 0 0 3px var(--color-info-50);
}

/* Admin-specific pagination styles */
.admin-panel .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) 0;
  flex-wrap: wrap;
}

.admin-panel .pagy-nav,
.admin-panel .pagy {
  gap: var(--space-1);
}

.admin-panel .pagy-nav a,
.admin-panel .pagy-nav span,
.admin-panel .pagy a,
.admin-panel .pagy span {
  min-width: var(--space-10);
  height: var(--space-10);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-default);
}

/* Admin page links */
.admin-panel .pagy-nav a,
.admin-panel .pagy a {
  background: var(--color-bg-primary);
  color: var(--color-info-500);
  border-color: var(--color-gray-200);
}

.admin-panel .pagy-nav a:hover,
.admin-panel .pagy a:hover {
  background: var(--color-info-500);
  color: var(--color-text-inverse);
  border-color: var(--color-info-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-info);
}

/* Admin current page */
.admin-panel .pagy-nav a.current,
.admin-panel .pagy-nav span.current,
.admin-panel .pagy a.current,
.admin-panel .pagy span.current {
  background: var(--color-info-500);
  color: var(--color-text-inverse);
  border-color: var(--color-info-600);
  box-shadow: var(--shadow-info-sm);
  cursor: default;
  pointer-events: none;
}

/* Responsive design */
@media (max-width: 768px) {
  .pagination-container,
  .admin-panel .pagination {
    gap: var(--space-4);
    margin: var(--space-5) 0;
  }

  .pagy-nav a,
  .pagy-nav span,
  .pagy a,
  .pagy span,
  .admin-panel .pagy-nav a,
  .admin-panel .pagy-nav span,
  .admin-panel .pagy a,
  .admin-panel .pagy span {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
  }

  .pagy.limit-selector {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .pagy-nav a,
  .pagy-nav span,
  .pagy a,
  .pagy span,
  .admin-panel .pagy-nav a,
  .admin-panel .pagy-nav span,
  .admin-panel .pagy a,
  .admin-panel .pagy span {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    font-size: var(--font-size-xs);
  }
}