/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pagy Tailwind Styles - Enhanced */
.pagy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: rgb(75 85 99); /* gray-600 */
  margin: 2rem 0;
}

.pagy a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: white;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  text-decoration: none;
  color: rgb(75 85 99); /* gray-600 */
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.pagy a:hover {
  background-color: rgb(249 250 251); /* gray-50 */
  border-color: rgb(209 213 219); /* gray-300 */
  color: rgb(55 65 81); /* gray-700 */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  transform: translateY(-1px);
}

.pagy a.current {
  color: white;
  background-color: rgb(59 130 246); /* blue-500 */
  border-color: rgb(59 130 246); /* blue-500 */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.pagy a.current:hover {
  transform: none;
  background-color: rgb(37 99 235); /* blue-600 */
  border-color: rgb(37 99 235); /* blue-600 */
}

.pagy .gap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  color: rgb(156 163 175); /* gray-400 */
  font-weight: 400;
}

/* Hide disabled previous/next links (but not current page) */
.pagy a[aria-disabled="true"][aria-label="Previous"],
.pagy a[aria-disabled="true"][aria-label="Next"] {
  display: none;
}