/**
 * CODIOH - Custom Styles
 * Additional styles for the application
 */

/* Category Pills Styling */
.category-pill {
  transition: all 0.3s ease;
  border-radius: 20px;
  padding: 0.375rem 1rem;
  font-weight: 500;
  cursor: pointer;
}

.category-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.category-pill.active {
  background-color: var(--bs-primary);
  color: white;
  border-color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}

.category-pill.btn-outline-success.active {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.4);
}

/* Gap utility for flexbox (older Bootstrap versions) */
.gap-2 {
  gap: 0.5rem;
}

/* Smooth transitions for theme switching */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Resource list improvements */
.list-group-item {
  transition: background-color 0.2s ease;
}

.list-group-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .category-pill {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .category-pill:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Search bar enhancements */
.input-group:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-radius: 0.375rem;
}

/* Responsive pills */
@media (max-width: 576px) {
  .category-pill {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
  }
}