/* ==================== STATUS PILLS (older alias) ====================
 * .status-pills / .status-pill / .pill-count are ALSO defined in
 * page-toolbar.css, which loads later and wins on equal specificity; the
 * container styling here (grey ground, padding) still applies because that
 * file does not restate it. Retire the pair together in a dedicated pass.
 *
 * The filter bar, filter grids and segmented status-tab rules that used to
 * live in this file were unused by every template and were removed in the
 * List Page Pattern (Sep 2026); the filter card is now .control-strip--card
 * in page-toolbar.css. */

.status-pills {
  display: flex;
  gap: 2px;
  background: var(--pk-gray-100);
  border-radius: 10px;
  padding: 3px;
  width: fit-content;
  border: none;
}

.status-pill {
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--pk-gray-500);
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border: none;
  background: transparent;
}

.status-pill:hover {
  color: var(--pk-gray-700);
  background: rgba(0, 0, 0, 0.04);
}

.status-pill.active {
  background: var(--pk-white);
  color: var(--pk-gray-900);
  box-shadow: var(--shadow-xs);
  font-weight: var(--font-medium);
}

.pill-count {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--pk-gray-200);
  color: var(--pk-gray-600);
}

.status-pill.active .pill-count {
  background: var(--pk-orange);
  color: #ffffff;
}

.pill-count--warning {
  background: var(--pk-warning-light) !important;
  color: var(--pk-warning) !important;
}

.pill-count--danger {
  background: var(--pk-error-light) !important;
  color: var(--pk-error) !important;
}

@media (max-width: 768px) {
  .status-pills {
    flex-wrap: wrap;
  }
}