/* Modern Minimal Pagination Styles */
nav.pagination {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 0;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    user-select: none;

    a {
      color: inherit;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    &:hover {
      border-color: var(--primary-color);
      background: #f9fafb;
      color: var(--primary-color);
      transform: translateY(-1px);
    }

    &:active {
      background: var(--primary-color);
      border-color: var(--primary-color);
      color: #ffffff;
      transform: translateY(0);
    }

    /* Current page styling */
    &.current {
      background: var(--primary-color);
      border-color: var(--primary-color);
      color: #ffffff;
      cursor: default;
    }

    &.current:hover {
      transform: none;
    }

    /* Disabled state */
    &.disabled {
      background: #f9fafb;
      border-color: #f3f4f6;
      color: #d1d5db;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* First/Last page styling */
    &.first,
    &.last {
      font-weight: 600;
    }

    /* Previous/Next styling */
    &.prev,
    &.next {
      padding: 0 16px;
      font-weight: 600;
    }

    /* Gap/ellipsis styling */
    &.gap {
      border: none;
      background: transparent;
      cursor: default;
      color: #9ca3af;
      pointer-events: none;
    }

    &.gap:hover {
      transform: none;
      background: transparent;
      border: none;
    }
  }
}

/* Pagination variants */
.pagination-sm {
  span {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
  }

  span.prev,
  span.next {
    padding: 0 12px;
  }
}

.pagination-lg {
  span {
    min-width: 48px;
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
  }

  span.prev,
  span.next {
    padding: 0 20px;
  }
}

/* Pagination with icons */
.pagination-with-icons {
  span.prev::before {
    content: "←";
    margin-right: 4px;
  }

  span.next::after {
    content: "→";
    margin-left: 4px;
  }

  span.first::before {
    content: "⇤";
    margin-right: 4px;
  }

  span.last::after {
    content: "⇥";
    margin-left: 4px;
  }
}

/* Compact pagination for mobile */
.pagination-compact {
  span:not(.current):not(.prev):not(.next):not(.first):not(.last) {
    display: none;
  }

  span.gap {
    display: flex;
  }
}

/* Pagination info */
.pagination-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #6b7280;
}

.pagination-info strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
  nav.pagination {
    padding: 16px 0;
    gap: 2px;

    span {
      min-width: 36px;
      height: 36px;
      padding: 0 8px;
      font-size: 13px;
    }

    span.prev,
    span.next {
      padding: 0 12px;
    }

    /* Hide some page numbers on mobile */
    span:not(.current):not(.prev):not(.next):not(.first):not(.last) {
      display: none;
    }

    /* Show only current and adjacent pages */
    span.current + span,
    span.current ~ span {
      display: flex;
    }
  }
}

@media (max-width: 480px) {
  nav.pagination {
    padding: 12px 0;

    span {
      min-width: 32px;
      height: 32px;
      padding: 0 6px;
      font-size: 12px;
    }

    span.prev,
    span.next {
      padding: 0 10px;
    }

    /* Show only essential navigation on very small screens */
    span:not(.current):not(.prev):not(.next) {
      display: none;
    }
  }
}

/* Loading state */
nav.pagination.loading {
  opacity: 0.6;
  pointer-events: none;
}

nav.pagination.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: pagination-spin 1s linear infinite;
}

@keyframes pagination-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Focus states for accessibility */
nav.pagination span:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

nav.pagination span a:focus {
  outline: none;
}

/* Alternative minimal style */
.pagination-minimal {
  span {
    border: none;
    background: transparent;
    color: #6b7280;
  }

  span:hover {
    background: #f3f4f6;
    border: none;
  }

  span.current {
    background: var(--primary-color);
    color: #ffffff;
  }

  span:active {
    background: var(--primary-darker-color);
  }
}

/* Rounded pagination */
.pagination-rounded {
  span {
    border-radius: 0;
  }
}

/* Pagination with separators */
.pagination-separated {
  gap: 8px;

  span {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  span:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

/* Page size selector */
.pagination-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.page-size-selector select {
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  background: #ffffff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
}

.page-size-selector select:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-color: var(--primary-color);
}

/* Results summary */
.pagination-summary {
  font-size: 14px;
  color: #6b7280;
}

.pagination-summary strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* Animation for page transitions */
.pagination-transition {
  animation: pagination-fade-in 0.3s ease-out;
}

@keyframes pagination-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}