/* Main CSS file can be empty or contain non-tailwind styles */

/* ========================================
   Pagy Pagination Styling
   ======================================== */

.pagy {
  /* Custom CSS variables for dark theme + brand colors */
  --B: 1;                    /* Brightness mode (1 = dark) */
  --H: 230;                  /* Hue for brand blue */
  --S: 100%;                 /* Saturation */
  --L: 43%;                  /* Lightness for #0015DA */
  --A: 1;                    /* Alpha/opacity */
  --spacing: 0.5rem;         /* Gap between pagination items */
  --padding: 0.75rem;        /* Padding inside each item */
  --rounding: 0.5rem;        /* Border radius */
  --border-width: 1px;       /* Border thickness */
  --font-size: 0.875rem;     /* Text size */
  --font-weight: 600;        /* Font weight */
  --line-height: 1.5;        /* Line height */

  /* Color scheme for dark theme */
  --text:               #9ca3af;           /* Gray text for inactive pages */
  --text-hover:         #ffffff;           /* White text on hover */
  --text-current:       #ffffff;           /* White text for active page */
  --background:         #1f2937;           /* Dark gray background */
  --background-hover:   #374151;           /* Lighter gray on hover */
  --background-current: #0015DA;           /* Brand blue for active page */
  --border-color:       #374151;           /* Border color for items */
  --border-current:     #0015DA;           /* Brand blue border for active */

  color: var(--text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: var(--font-weight);
  display: flex;
  align-items: center;
  gap: var(--spacing);
}

/* All pagination links/buttons */
.pagy a:not([role="separator"]) {
  display: block;
  text-decoration: none;
  background-color: var(--background);
  padding: calc(var(--padding) / 2) var(--padding);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--rounding);
  color: inherit;
  transition: all 0.2s ease;
  min-width: 2.5rem;
  text-align: center;
}

/* Hover state for clickable links */
.pagy a[href]:hover {
  background-color: var(--background-hover);
  color: var(--text-hover);
  border-color: var(--background-current);
}

/* Non-clickable items (disabled prev/next) */
.pagy a:not([href]) {
  cursor: default;
  opacity: 0.5;
}

/* Disabled links (when on first/last page) */
.pagy a[role="link"]:not([aria-current]) {
  opacity: 0.6;
}

/* ACTIVE PAGE - This is the key styling */
.pagy a[aria-current="page"] {
  background-color: var(--background-current);
  color: var(--text-current);
  border-color: var(--border-current);
  cursor: default;
  font-weight: 700;
}

/* Gap separator (...) */
.pagy a[role="separator"] {
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: default;
}

/* Optional: Style prev/next buttons differently */
.pagy a[rel="prev"],
.pagy a[rel="next"] {
  font-weight: 700;
}