/* ─── T7 — Venda Ultrarrápida: foco por teclado ───────────────────────────── */

/*
 * Estado de foco virtual nos cards de venda (navegação ArrowDown/Up/Tab).
 * Usa a classe .foco-teclado (gerenciada por venda-rapida.js) em vez de :focus
 * puro, porque o foco nativo em <div tabindex=-1> varia entre navegadores.
 */
#listaVenda .product-card.venda-card:focus,
#listaVenda .product-card.venda-card.foco-teclado {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(27, 58, 47, 0.12);
  /* Evita o salto de layout que outline provoca em alguns browsers */
  position: relative;
  z-index: 1;
}

/* Remove o outline nativo do browser para não duplicar com o nosso */
#listaVenda .product-card.venda-card:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

/*
 * Destaque sutil no campo de busca quando há um sufixo *N ativo.
 * A classe .tem-sufixo é adicionada por venda-rapida.js via JS
 * como feedback visual de que a quantidade foi capturada.
 */
#campoBuscaVenda.tem-sufixo {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.18);
}

/*
 * Badge de quantidade pendente (*N) que aparece no canto superior
 * direito do campo de busca — injetado dinamicamente por venda-rapida.js.
 */
.busca-venda-wrap {
  position: relative;
  flex: 1;
}

#qtd-pendente-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--amber-deep);
  background: #fef3db;
  border-radius: 4px;
  padding: 1px 6px;
  pointer-events: none;
  white-space: nowrap;
}

/*
 * Legenda de atalhos de teclado — exibida discretamente abaixo do campo
 * de busca quando a aba Venda está ativa. Injetada por venda-rapida.js.
 */
#venda-atalhos-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-soft);
  padding: 4px 4px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0.75;
}

#venda-atalhos-hint kbd {
  display: inline-block;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0px 4px;
  font-size: 9.5px;
  font-family: inherit;
  color: var(--ink);
  margin-right: 2px;
  vertical-align: middle;
}