/* Custom Pagination Component Styles */
/* Wrapper around Dash Mantine Components Pagination */

/* Set gap between controls */
.custom-pagination {
  gap: 4px !important;
}

/* Target all controls with accent-brand color */
.custom-pagination .mantine-Pagination-control {
  color: hsl(var(--foreground)) !important;
  font-weight: 500;
  font-size: 14px;
  border-radius: 6px !important;
  height: 36px !important;
  min-height: 36px !important;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out !important;
}

/* Active scale effect for all pagination buttons - active:scale-95 (exclude disabled) */
.custom-pagination .mantine-Pagination-control:active:not([disabled]):not([data-disabled]) {
  transform: scale(0.95) !important;
  transition: transform 150ms ease-in-out !important;
}

/* Number buttons should be square (36px x 36px) */
.custom-pagination .mantine-Pagination-control:not(:first-child):not(:last-child):not([data-direction]):not([aria-label*="previous" i]):not([aria-label*="next" i]):not([aria-label*="Previous" i]):not([aria-label*="Next" i]) {
  width: 36px !important;
  min-width: 36px !important;
}

/* Target previous button - try all possible selectors */
.custom-pagination .mantine-Pagination-control:first-child::after,
.custom-pagination .mantine-Pagination-control:first-of-type::after,
.custom-pagination .mantine-Pagination-control:has(svg):first-of-type::after,
.custom-pagination .mantine-Pagination-control[data-direction="previous"]::after,
.custom-pagination .mantine-Pagination-control[aria-label*="previous" i]::after,
.custom-pagination .mantine-Pagination-control[aria-label*="Previous" i]::after {
  content: " Prev" !important;
  margin-left: 6px;
  font-weight: 500;
  display: inline !important;
}

/* Add padding to prev button - match Tailwind: whitespace-nowrap gap-1 p-2.5 */
.custom-pagination .mantine-Pagination-control:first-child,
.custom-pagination .mantine-Pagination-control:first-of-type,
.custom-pagination .mantine-Pagination-control:has(svg):first-of-type,
.custom-pagination .mantine-Pagination-control[data-direction="previous"],
.custom-pagination .mantine-Pagination-control[aria-label*="previous" i],
.custom-pagination .mantine-Pagination-control[aria-label*="Previous" i] {
  padding: 0.625rem !important; /* p-2.5 = 10px */
  white-space: nowrap !important; /* whitespace-nowrap */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0.25rem !important; /* gap-1 = 4px */
  box-sizing: border-box !important;
}

/* Target next button - use ::before to place text before icon */
.custom-pagination .mantine-Pagination-control:last-child::before,
.custom-pagination .mantine-Pagination-control:last-of-type::before,
.custom-pagination .mantine-Pagination-control:has(svg):last-of-type::before,
.custom-pagination .mantine-Pagination-control[data-direction="next"]::before,
.custom-pagination .mantine-Pagination-control[aria-label*="next" i]::before,
.custom-pagination .mantine-Pagination-control[aria-label*="Next" i]::before {
  content: "Next " !important;
  margin-right: 6px;
  font-weight: 500;
  display: inline !important;
}

/* Add padding to next button - match Tailwind: whitespace-nowrap gap-1 p-2.5 */
.custom-pagination .mantine-Pagination-control:last-child,
.custom-pagination .mantine-Pagination-control:last-of-type,
.custom-pagination .mantine-Pagination-control:has(svg):last-of-type,
.custom-pagination .mantine-Pagination-control[data-direction="next"],
.custom-pagination .mantine-Pagination-control[aria-label*="next" i],
.custom-pagination .mantine-Pagination-control[aria-label*="Next" i] {
  padding: 0.625rem !important; /* p-2.5 = 10px */
  white-space: nowrap !important; /* whitespace-nowrap */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0.25rem !important; /* gap-1 = 4px */
  box-sizing: border-box !important;
}

/* Alternative: Target by SVG icon presence - prev/next buttons have icons */
.custom-pagination .mantine-Pagination-control svg + *::after,
.custom-pagination .mantine-Pagination-control:has(> svg):first-of-type::after {
  content: " Prev" !important;
  margin-left: 6px;
  font-weight: 500;
  display: inline !important;
}

/* Hover state with accent color - exclude disabled and active buttons */
.custom-pagination .mantine-Pagination-control:hover:not([data-active]):not([disabled]):not([data-disabled]) {
  background-color: hsl(var(--accent)) !important;
}

/* Disabled buttons - no hover effects */
.custom-pagination .mantine-Pagination-control[disabled]:hover,
.custom-pagination .mantine-Pagination-control[data-disabled]:hover {
  background-color: transparent !important;
}

/* Active page styling */
.custom-pagination .mantine-Pagination-control[data-active] {
  background-color: hsl(var(--accent-brand)) !important;
  color: white !important;
}

/* Dots styling */
.custom-pagination .mantine-Pagination-dots {
  opacity: 0.6;
}