/* ============================================================================
   cotacao.css — a tela de Cotação (lista | cadastro).

   Porte de D2PdvSmart\Web\wwwroot\cadastro\cotacao.html (Tailwind inline) +
   src/js/pages/cotacao.js (os quatro cartões de resumo, o card de cada
   cotação e a lista de itens).

   O FORMULÁRIO NÃO ESTÁ AQUI: o título e o grupo de status usam o CSS `kcad`
   (../modals/cadastro.css) — mesma decisão de Produto e Contas a Pagar. O
   quadro "Preços Recebidos" é um modal e mora em ../modals/modais.css
   (prefixo mprec).
   ============================================================================ */

/* Sem overflow:hidden aqui tambem, e pelo mesmo motivo do .cot-bloco logo
   abaixo: a lista suspensa da busca de produto e absoluta e pode passar da
   borda do cartao quando o formulario ja esta rolado. Os cantos do cabecalho
   ficam por conta do proprio .cot-card-head. */
.cot-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}

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

.cot-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;
}
.cot-voltar:hover { background: rgba(0, 0, 0, .2); }

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

/* ---- cartoes do formulario --------------------------------------------- */
/* SEM overflow:hidden, e o motivo merece um paragrafo.
 *
 * O cartao "Adicionar Produto" hospeda o <kb-busca> (PdvBusca.pas), cuja
 * lista suspensa e um .kb-busca-menu `position:absolute` que cai POR BAIXO do
 * campo -- quase sempre para fora da caixa. Com overflow:hidden no cartao, o
 * browser RECORTA o que sai dele: a lista de produtos aparecia cortada ou
 * simplesmente nao aparecia, e parecia estar "atras" do bloco seguinte. Nao
 * era z-index (o menu ja tem 60): era recorte -- um ancestral com overflow
 * diferente de `visible` corta o filho absoluto, e nenhum z-index desfaz
 * isso. A tela de Pedido nunca teve o problema porque o .ped-bloco dela nao
 * recorta nada.
 *
 * O overflow estava aqui so para o titulo nao vazar os cantos arredondados;
 * quem cuida disso agora e o proprio .cot-bloco-titulo, com o seu radius. */
.cot-bloco {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: .9rem;
}
.cot-bloco-titulo {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--surface-2, rgba(127, 127, 127, .08));
  color: var(--text);
  font-size: .74rem;
  font-weight: 800;
}
.cot-bloco-titulo i { color: var(--primary); }
.cot-bloco-body { padding: 1rem .9rem .9rem; }

/* ---- filtros da lista --------------------------------------------------- */
.cot-filtros {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: .8rem;
}
.cot-busca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.cot-busca i {
  position: absolute;
  top: 50%;
  left: .8rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .82rem;
  pointer-events: none;
}
.cot-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;
}
.cot-busca input:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.cot-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;
  cursor: pointer;
}
.cot-btn:hover { border-color: var(--primary); }
.cot-btn--primario {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary, #111);
}
.cot-btn--primario:hover { background: var(--primary-hover); }

.cot-btn.cot-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;
}

/* ---- os quatro cartoes de resumo ---------------------------------------- */
.cot-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}
.cot-resumo {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .6rem .75rem;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}
.cot-resumo span { font-size: .68rem; color: var(--text-muted); }
.cot-resumo strong { font-size: 1.5rem; font-weight: 800; color: var(--text); }

.cot-resumo--pend { border-color: rgba(185, 28, 28, .45); }
.cot-resumo--pend span,
.cot-resumo--pend strong { color: var(--danger, #b91c1c); }

.cot-resumo--receb { border-color: rgba(180, 83, 9, .45); }
.cot-resumo--receb span,
.cot-resumo--receb strong { color: var(--warning, #b45309); }

.cot-resumo--concl { border-color: rgba(21, 128, 61, .45); }
.cot-resumo--concl span,
.cot-resumo--concl strong { color: var(--success, #15803d); }

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

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

.cot-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);
}
.cot-item-main { flex: 1; min-width: 0; }
.cot-item-titulo {
  margin-bottom: .35rem;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
}
.cot-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.cot-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .35rem;
  font-size: .7rem;
  color: var(--text-muted);
}
.cot-item-meta i { margin-right: .2rem; }

.cot-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--surface-2, rgba(127, 127, 127, .1));
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
}
.cot-tag--ok {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(21, 128, 61, .12);
  color: var(--success, #15803d);
}
.cot-tag--erro {
  border-color: rgba(185, 28, 28, .35);
  background: rgba(185, 28, 28, .12);
  color: var(--danger, #b91c1c);
}
.cot-tag--aviso {
  border-color: rgba(180, 83, 9, .35);
  background: rgba(180, 83, 9, .12);
  color: var(--warning, #b45309);
}
.cot-tag--info {
  border-color: rgba(29, 78, 216, .35);
  background: rgba(29, 78, 216, .12);
  color: #1d4ed8;
}

.cot-item-acoes { display: flex; gap: .25rem; }
.cot-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;
}
.cot-item-acoes button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

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

/* ---- "Adicionar Produto" ------------------------------------------------ */
/* Contexto de empilhamento proprio, acima do bloco "Itens da Cotacao" que vem
   logo abaixo: irmaos posicionados empilham na ordem do documento, entao sem
   isto a lista suspensa da busca -- que agora SAI do cartao -- passaria por
   tras do cartao seguinte. */
.cot-add {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .6rem;
}
.cot-add-busca { flex: 1 1 18rem; min-width: 0; }
.cot-add-qtde  { flex: 0 1 9rem; min-width: 7rem; }

/* ---- itens da cotacao --------------------------------------------------- */
.cot-itens { display: flex; flex-direction: column; }

.cot-linha {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--card-border);
  font-size: .8rem;
}
.cot-linha:last-child { border-bottom: 0; }
.cot-col-desc {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cot-col-qtd { flex: 0 0 auto; color: var(--text-muted); font-size: .74rem; }
.cot-col-num {
  flex: 0 0 auto;
  min-width: 6rem;
  text-align: right;
  color: var(--text-muted);
  font-size: .74rem;
}
.cot-col-acoes { flex: 0 0 auto; display: flex; gap: .25rem; }
.cot-col-acoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.cot-col-acoes button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

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

@media (max-width: 640px) {
  .cot-card-body { padding: .8rem; }
  .cot-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-item { flex-direction: column; }
  .cot-item-acoes { align-self: flex-end; }
  .cot-linha { flex-wrap: wrap; }
  .cot-col-desc { flex: 0 0 100%; }
}