/*
 * SEARCH-BOX — caixa de busca reutilizável.
 * Input único com a lupa sobreposta à esquerda (dentro do campo) e um
 * "Limpar" opcional ao lado. Fonte ÚNICA do estilo de busca: usada na topbar
 * (busca global) e nas barras de filtro das listagens. O posicionamento
 * (largura na topbar etc.) fica no contexto; aqui só o visual do campo.
 *
 * appearance:none é obrigatório — sem ele o input type="search" ignora o
 * padding-left no WebKit/Blink e o texto fica em cima da lupa.
 */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 16rem;
  max-width: 100%;
}

.search-box__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-box__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Especificidade .search-box .search-box__input (0,2,0) vence o estilo base
   input[type="search"] do 06_forms (0,1,1), que aplica padding uniforme e
   cobriria a lupa. */
.search-box .search-box__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.search-box__input::placeholder {
  color: var(--color-text-muted);
}

.search-box__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-box__clear {
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}