/**
 * Styles for the entity queue pagination with concept difficulty heatmap.
 */

/* Base pagination styles */
.pagination-container .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 1rem 0;
}

.pagination .page-item {
  border-radius: 4px;
  overflow: hidden;
}

.pagination .page-item .page-link {
  padding: 0.375rem 0.75rem;
  display: inline-block;
  text-align: center;
  min-width: 2rem;
}

/* Difficulty level background colors - Easy (green) */
.pagination .page-item.easy.recent .page-link {
  background-color: hsl(120, 70%, 65%);
}

.pagination .page-item.easy.aging .page-link {
  background-color: hsla(120, 70%, 65%, 0.6);
}

.pagination .page-item.easy.old .page-link {
  background-color: hsla(120, 70%, 65%, 0.3);
}

/* Difficulty level background colors - Medium (orange) */
.pagination .page-item.medium.recent .page-link {
  background-color: hsl(35, 90%, 60%);
}

.pagination .page-item.medium.aging .page-link {
  background-color: hsla(35, 90%, 60%, 0.6);
}

.pagination .page-item.medium.old .page-link {
  background-color: hsla(35, 90%, 60%, 0.3);
}

/* Difficulty level background colors - Hard (red) */
.pagination .page-item.hard.recent .page-link {
  background-color: hsl(5, 90%, 60%);
}

.pagination .page-item.hard.aging .page-link {
  background-color: hsla(5, 90%, 60%, 0.6);
}

.pagination .page-item.hard.old .page-link {
  background-color: hsla(5, 90%, 60%, 0.3);
}

/* Text colors for better contrast */
.pagination .page-item.easy .page-link,
.pagination .page-item.medium .page-link {
  color: rgba(0, 0, 0, 0.8); /* Dark text for light backgrounds */
}

.pagination .page-item.hard .page-link {
  color: rgba(255, 255, 255, 0.9); /* Light text for dark backgrounds */
}

/* Hover states */
.pagination .page-item .page-link:hover {
  opacity: 0.85;
}