/* Pills UI Components */
/* Reusable pill-based filtering interface */
/* Light mode defaults - dark mode in pills-dark.css */

/* ========================================
   Pills - Container Layouts
   ======================================== */

.spell-level-pills,
.spell-class-pills,
.spell-archetype-pills {
  gap: 0.25rem;
}

/* ========================================
   Level Pills
   ======================================== */

.level-pill {
  transition: all 0.2s ease;
  font-weight: 500;
  min-width: 3rem;
  border-radius: 1.25rem !important;
  background: #f8f9fa;
  border-color: #dee2e6;
  color: #6c757d;
}

.level-pill:hover {
  border-color: #adb5bd;
  color: #495057;
  transform: translateY(-1px);
}

.level-pill.active {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border-color: #007bff;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.level-pill.active:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  border-color: #0056b3;
  transform: translateY(-1px);
}

.level-pill[data-level="0"] {
  font-style: italic;
  min-width: 4rem;
}

/* ========================================
   Class Pills
   ======================================== */

.class-pill {
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.7;
}

.class-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.class-pill.active {
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.class-pill:not(.active) {
  background-color: transparent !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6 !important;
}

.class-pill:not(.active):hover {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  border-color: #adb5bd !important;
}

/* ========================================
   Archetype Pills
   ======================================== */

.archetype-pill {
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.7;
}

.archetype-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.archetype-pill.active {
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.archetype-pill:not(.active) {
  background-color: transparent !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6 !important;
}

.archetype-pill:not(.active):hover {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  border-color: #adb5bd !important;
}

/* ========================================
   Filter Pills (Generic)
   ======================================== */

.school-filter-pill,
.casting-time-pill,
.range-filter-pill,
.target-filter-pill,
.duration-filter-pill,
.filter-pill {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.school-filter-pill:hover,
.casting-time-pill:hover,
.range-filter-pill:hover,
.target-filter-pill:hover,
.duration-filter-pill:hover,
.filter-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.school-filter-pill.active,
.casting-time-pill.active,
.range-filter-pill.active,
.target-filter-pill.active,
.duration-filter-pill.active,
.filter-pill.active {
  background-color: #0d6efd !important;
  color: white;
}

/* ========================================
   Responsive Mobile Adjustments
   ======================================== */

@media (max-width: 768px) {
  .spell-level-pills,
  .spell-class-pills,
  .spell-archetype-pills {
    gap: 0.2rem;
  }

  .level-pill {
    min-width: 2.5rem;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }

  .level-pill[data-level="0"] {
    min-width: 3.5rem;
  }

  .class-pill,
  .archetype-pill {
    font-size: 0.7rem;
  }
}