/* ============================================================================
   produto.css — a tela de Produto (lista | cadastro).

   Porte de D2PdvSmart\Web\wwwroot\cadastro\produto.html (Tailwind inline) +
   src/js/pages/produto.js (o card da lista).

   O FORMULARIO NAO ESTA AQUI. Os campos usam o CSS `kcad`
   (../modals/cadastro.css): e a mesma grade de seis colunas, os mesmos
   floating-labels e o mesmo "campo com botao colado" que o modal de cadastro
   ja desenhava — nao havia motivo para um segundo desenho de campo. Este
   arquivo cuida so do que e da TELA: o cartao, as duas barras de abas, a
   lista e o rodape.

   Quem liga/desliga .hidden nos paineis e o runtime (ScreenProduto), por
   patch — nao ha JS de tela.
   ============================================================================ */

.prod-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.prod-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: var(--primary);
  color: var(--on-primary, #111);
  font-weight: 700;
}
.prod-card-titulo { flex: 1; font-size: .88rem; }

.prod-voltar {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: .4rem;
  background: rgba(255, 255, 255, .22);
  color: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.prod-voltar:hover { background: rgba(0, 0, 0, .2); }

/* O `.hidden` que esconde estes dois botoes e o do Tailwind, que no
   index.html vem ANTES deste arquivo: com a mesma especificidade (uma
   classe) quem ganha e a regra daqui, e o `display: inline-flex` acima
   anulava o `display: none`. Sem estas duas linhas o "Voltar" aparecia na
   tela de lista, onde nao tem o que fazer, e o "Clonar" continuava na tela
   depois de clonar. */
.prod-voltar.hidden,
.prod-btn.hidden { display: none; }

.prod-card-body { padding: 1.15rem; }

/* ---- abas internas do cadastro ----------------------------------------- */
.prod-itabs {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin: -1.15rem -1.15rem 1.15rem;
  padding: 0 .9rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  overflow-x: auto;
}
.prod-itab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.prod-itab:hover { color: var(--text); }
.prod-itab--on {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

/* ---- cartoes do formulario --------------------------------------------- */
.prod-bloco {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: .9rem;
  overflow: hidden;
}
.prod-bloco-titulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  color: var(--text);
  font-size: .74rem;
  font-weight: 800;
}
.prod-bloco-titulo i { color: var(--primary); }
.prod-bloco-body { padding: 1rem .9rem .9rem; }

.prod-aviso,
.prod-info-linha2 {
  margin: 0 0 .85rem;
  font-size: .76rem;
  color: var(--text-muted);
}
.prod-aviso i { color: var(--primary); margin-right: .3rem; }
.prod-info-linha2 strong { color: var(--text); }
.prod-info-linha2 small { opacity: .75; }

/* ---- filtros da lista --------------------------------------------------- */
.prod-filtros {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: .6rem;
}
.prod-busca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.prod-busca i {
  position: absolute;
  top: 50%;
  left: .8rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .82rem;
  pointer-events: none;
}
.prod-busca input {
  width: 100%;
  padding: .55rem .7rem .55rem 2.2rem;
  border: 1px solid var(--input-border, var(--card-border));
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.prod-busca input:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.prod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.prod-btn:hover { border-color: var(--primary); }
.prod-btn--primario {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}
.prod-btn--primario:hover { background: var(--primary-hover); }

.prod-btn.prod-novo {
  flex: 0 0 auto;
  width: 2.75rem;
  height: auto;
  padding: 0;
  font-size: .95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-left: -1px;
}

/* o leitor de codigo de barras pela camera fica ao lado do "Novo" */
.prod-btn--leitor {
  margin-left: .5rem;
}

/* "Filtros" (grupo / fornecedor / marca) — o mesmo botao da tela de Contas a
   Pagar. Discreto quando nao ha filtro escolhido; com a cor do tema quando
   ha, para o usuario nao perder de vista por que a lista encolheu. */
.prod-btn--filtro {
  margin-left: .5rem;
  color: var(--text-muted);
}
.prod-btn--filtro:hover { color: var(--text); }
.prod-btn.prod-btn--filtro-on {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}

/* ---- os dois "checkbox" do filtro (botoes, o estado vive no runtime) ---- */
.prod-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.prod-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
}
.prod-toggle i { font-size: .7rem; }
.prod-toggle--on {
  border-color: var(--primary);
  color: var(--primary);
}
.prod-toggle--on i::before { content: "\f14a"; } /* fa-square-check */

/* ---- linha de informacao ------------------------------------------------ */
.prod-info-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .76rem;
}
.prod-info { color: var(--text-muted); }
.prod-status { flex: 1; color: var(--warning, #b45309); font-weight: 600; }
.prod-status.erro { color: var(--danger, #b91c1c); }

/* ---- a lista ------------------------------------------------------------ */
.prod-lista { display: flex; flex-direction: column; gap: .5rem; }

.prod-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem .8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
}
.prod-item-main { flex: 1; min-width: 0; }
.prod-item-desc {
  margin-bottom: .3rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
}
.prod-item-precos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: .4rem;
  font-size: .74rem;
  color: var(--text-muted);
}
.prod-item-venda { color: var(--success, #15803d); }

.prod-item-tags,
.prod-item-estoques {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.prod-item-estoques { margin-top: .35rem; }

.prod-tag {
  display: inline-flex;
  align-items: center;
  padding: .1rem .4rem;
  border: 1px solid var(--card-border);
  border-radius: .3rem;
  background: var(--surface-2, rgba(127, 127, 127, .1));
  color: var(--text-muted);
  font-size: .68rem;
}
.prod-tag--ok {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}
.prod-tag--off {
  border-color: rgba(185, 28, 28, .35);
  background: rgba(185, 28, 28, .12);
  color: var(--danger, #b91c1c);
}
.prod-tag--zero { opacity: .5; }

.prod-item-acoes { display: flex; gap: .25rem; }
.prod-item-acoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.prod-item-acoes button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- paginacao e rodape ------------------------------------------------- */
.prod-pager {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.prod-pager button {
  padding: .3rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.prod-pager button:hover { border-color: var(--primary); }
.prod-pager-info {
  flex: 1;
  text-align: right;
  font-size: .74rem;
  color: var(--text-muted);
}

.prod-totalizador {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--card-border);
  font-size: .76rem;
  color: var(--text-muted);
}
.prod-totalizador strong { color: var(--text); font-size: .9rem; }

/* ---- rodape do cadastro -------------------------------------------------- */
.prod-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--card-border);
}

/* ---- as duas abas que ja eram "em breve" no proprio D2PdvSmart ---------- */
.prod-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  text-align: center;
}
.prod-vazio i { font-size: 2.2rem; opacity: .6; }
.prod-vazio p { margin: .5rem 0 0; font-size: .84rem; }
.prod-vazio small { font-size: .72rem; opacity: .8; }

/* ---- aba Relatorios do produto ----------------------------------------- */
/* O RESULTADO nao esta aqui: as tabelas, os KPIs e os blocos por empresa
   usam as classes `rel-*` de pages/relatorios.css, que o index.html ja
   carrega. Aqui ficam so os cinco chips de escolha, a linha de filtro e as
   tres marcas que a tela de Relatorios nao tinha (de/para, movimento). */

/* Seis relatorios em duas linhas de tres (pedido de 23/09/2026). */
.prod-rel-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin-bottom: .9rem;
}

.prod-rel-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-surface-2, transparent);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.prod-rel-chip i { color: var(--primary); font-size: .85rem; flex: 0 0 auto; }
.prod-rel-chip span { min-width: 0; }
.prod-rel-chip:hover:not(:disabled) { border-color: var(--primary); }

.prod-rel-chip--on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.prod-rel-chip--on i { color: inherit; }

/* Sem produto aberto os cinco ficam assim — o Enabled = False dos TBitBtn. */
.prod-rel-chip:disabled { opacity: .45; cursor: not-allowed; }

.prod-rel-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  margin-bottom: .8rem;
}
/* O <filtro-data> FICA SOZINHO NA LINHA, e isso e o ponto: o select de
   Empresa so existe em "Entradas e Saidas", entao dividir a linha com ele
   faria o filtro de datas encolher (673px -> 450px, medido) ao trocar de
   relatorio — a mesma barra mudando de tamanho conforme o chip clicado.
   Com a base em 100% o select sempre quebra para a linha de baixo e o
   periodo tem a mesma largura nos cinco. */
.prod-rel-periodo { flex: 1 1 100%; min-width: 0; }
.prod-rel-empresa { flex: 0 1 14rem; min-width: 0; }

.prod-rel-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .7rem;
}
.prod-rel-titulo {
  margin: 0;
  font-size: .88rem;
  font-weight: 800;
  color: var(--text);
}

.prod-rel-conteudo { min-height: 6rem; }

.prod-rel-bloco-body { padding: .7rem .8rem .1rem; }
/* Dentro de um bloco os KPIs ja tem a moldura do bloco em volta. */
.prod-rel-bloco-body .rel-kpis { margin-bottom: .6rem; }

/* "antes -> depois" de descricao e de preco (Historico Alteracao). */
.prod-rel-depara { white-space: normal; min-width: 12rem; }
.prod-rel-de {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: .85;
}
.prod-rel-seta { margin: 0 .35rem; color: var(--text-muted); font-size: .7rem; }
.prod-rel-para { font-weight: 700; color: var(--text); }
.prod-rel-para--sobe  { color: var(--success); }
.prod-rel-para--desce { color: var(--danger); }

/* E/S da coluna `movimento` do tb_produto_logs. */
.prod-rel-mov {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.prod-rel-mov i { font-size: .65rem; }
.prod-rel-mov--e { background: var(--primary-soft); color: var(--success); }
.prod-rel-mov--s { background: var(--primary-soft); color: var(--danger); }

/* Clientes que Compraram: uma pagina por empresa. */
.prod-rel-pager {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}
.prod-rel-pg-txt {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: .85rem;
  font-weight: 800;
  color: var(--text);
}
.prod-rel-pg-btn {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-surface-2, transparent);
  color: var(--primary);
  cursor: pointer;
}
.prod-rel-pg-btn:hover:not(:disabled) { border-color: var(--primary); }
.prod-rel-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.prod-rel .rel-tabela tfoot td {
  padding: .55rem .75rem;
  color: var(--text);
  font-weight: 800;
  border-top: 2px solid var(--card-border);
}


@media (max-width: 640px) {
  /* A busca e o "+" continuam colados na primeira linha (nao da para separar
     o par sem quebrar o botao colado); o leitor e o "Filtros" caem para a
     segunda e dividem a largura — o mesmo arranjo da tela de Contas a Pagar.
     Sem isso os tres botoes disputavam a linha com a busca e, quando o rotulo
     virava "Filtros (2)", a linha estourava e os botoes cresciam. */
  .prod-filtros { flex-wrap: wrap; }
  .prod-busca { flex: 1 1 60%; }
  .prod-btn--leitor,
  .prod-btn--filtro { flex: 1 1 40%; margin-left: 0; margin-top: .4rem; }
  .prod-btn--leitor + .prod-btn--filtro { margin-left: .4rem; }

  .prod-card-body { padding: .8rem; }
  .prod-itabs { margin: -.8rem -.8rem .8rem; }
  .prod-item { flex-direction: column; }
  .prod-item-acoes { align-self: flex-end; }

  /* Continua 3 + 3 no celular; para caber, o icone sobe para cima do
     rotulo e o texto quebra em duas linhas. */
  .prod-rel-chip {
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    font-size: .68rem;
    padding: .5rem .35rem;
    text-align: center;
  }
  .prod-rel-empresa { flex: 1 1 100%; }
}