/* ========================================
   FILTER PILLS
   Reusable pill-shaped filter links
   ======================================== */

.filter-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arp-space-2);
  margin-bottom: var(--arp-space-5);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--arp-radius-full);
  border: 1px solid var(--arp-border);
  background: var(--arp-surface-raised);
  text-decoration: none;
  color: var(--arp-text-muted);
  font-weight: 500;
}

.filter-pill:hover {
  border-color: var(--arp-border-strong);
  color: var(--arp-gray-700);
}

[data-theme="dark"] .filter-pill:hover {
  color: #d1d5db;
}

/* Active pill (selected filter) */
.filter-pill.is-active {
  border-width: 2px;
  border-color: var(--arp-accent);
  color: var(--arp-gray-700);
}

[data-theme="dark"] .filter-pill.is-active {
  color: #f3f4f6;
}

/* Icon color variants */
.filter-pill .fas { color: var(--arp-accent); }

.filter-pill.is-shared .fas { color: #0ea5e9; }
.filter-pill.is-available .fas { color: #10b981; }
.filter-pill.is-routed .fas { color: #f59e0b; }
.filter-pill.is-location .fas { color: #8b5cf6; }

[data-theme="dark"] .filter-pill.is-shared .fas { color: #38bdf8; }
[data-theme="dark"] .filter-pill.is-available .fas { color: #34d399; }
[data-theme="dark"] .filter-pill.is-routed .fas { color: #fbbf24; }
[data-theme="dark"] .filter-pill.is-location .fas { color: #a78bfa; }

/* Active pill border color variants */
.filter-pill.is-active.is-shared { border-color: #0ea5e9; }
.filter-pill.is-active.is-available { border-color: #10b981; }
.filter-pill.is-active.is-routed { border-color: #f59e0b; }
.filter-pill.is-active.is-location { border-color: #8b5cf6; }

[data-theme="dark"] .filter-pill.is-active.is-shared { border-color: #38bdf8; }
[data-theme="dark"] .filter-pill.is-active.is-available { border-color: #34d399; }
[data-theme="dark"] .filter-pill.is-active.is-routed { border-color: #fbbf24; }
[data-theme="dark"] .filter-pill.is-active.is-location { border-color: #a78bfa; }

@media screen and (max-width: 768px) {
  .filter-pill-row {
    gap: var(--arp-space-1-5);
  }
}