/* ============================================================
   COMPONENTS.CSS — componentes de UI compartilhados
   Base reutilizável entre a vitrine (style.css) e o admin (admin.css).
   Carrega ANTES de style.css: aqui fica o comum, lá os deltas.
   ============================================================ */

/* ---- CONTROL BAR ----
   Barra horizontal de "pills" segmentados (filtros por tipo).
   Variantes: .filter-bar (vitrine, alta) e .stock-filter-bar (admin, compacta)
   apenas sobrescrevem altura/padding/font. */
.control-bar {
  display: flex;
  align-items: stretch;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.control-bar .type-pill {
  height: 100%;
  border: none;
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.control-bar .type-pill:last-child { border-right: none; }

.control-bar .type-pill:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.control-bar .type-pill.active {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}