/* =========================================================
   Estoque e compras (pages/estoque.js, estoque/*.js — PDV Fase 4).
   So tokens do design system: nenhuma cor literal.
   Layout pensado primeiro para o celular (uma coluna) e aberto em grade
   a partir de 768px. `display` do autor vence `[hidden]`: os elementos que
   usam o atributo declaram a regra logo abaixo.
   ========================================================= */

[hidden].est-erro-cf, #est-p-novo[hidden] { display: none; }

/* ---------- Campos e filtros ---------- */
.est-campo-cf { display: flex; flex-direction: column; min-width: 0; }
.est-campo-cf .form-label { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-1); }

.est-filtros-cf { padding: var(--space-5); }
.est-filtros-cf__linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
.est-filtros-cf__linha .est-campo-cf--larga { grid-column: 1 / -1; }
.est-filtros-cf__acoes { grid-column: 1 / -1; display: flex; }
.est-filtros-cf__acoes .btn-cf { width: 100%; justify-content: center; }
@media (min-width: 768px) {
  .est-filtros-cf__linha { grid-template-columns: 11rem 11rem minmax(14rem, 1fr) auto; }
  .est-filtros-cf__linha .est-campo-cf--larga { grid-column: auto; }
  .est-filtros-cf__acoes { grid-column: auto; }
  .est-filtros-cf__acoes .btn-cf { width: auto; }
}

/* ---------- Topo de uma visao interna (voltar + titulo) ---------- */
.est-topo-cf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.est-titulo-cf { margin: 0; font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--text-primary); }

/* ---------- Link da primeira coluna da lista ---------- */
.est-link-cf {
  border: 0; background: transparent; padding: 0; min-height: 44px;
  color: var(--color-primary); font: inherit; font-weight: var(--fw-semibold);
  text-align: left; cursor: pointer; border-radius: var(--radius-control);
}
.est-link-cf:hover { text-decoration: underline; }
.est-link-cf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Paginacao pelo servidor ---------- */
.est-pager-cf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.est-pager-cf__info { color: var(--text-secondary); font-size: var(--text-sm); }
.est-pager-cf__botoes { display: flex; gap: var(--space-2); }

/* ---------- Detalhe da compra ---------- */
.est-resumo-cf { padding: var(--space-5); }
.est-resumo-cf__grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0; }
.est-resumo-cf__grade dt { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); margin-bottom: 2px; }
.est-resumo-cf__grade dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.est-resumo-cf__obs { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-color); overflow-wrap: anywhere; }
@media (min-width: 768px) { .est-resumo-cf__grade { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Formulario da compra ---------- */
.est-form-cf { display: flex; flex-direction: column; gap: var(--space-5); }
.est-form-cf__cab { padding: var(--space-5); display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) {
  .est-form-cf__cab { grid-template-columns: 12rem minmax(14rem, 1fr) 14rem; }
  .est-form-cf__cab .est-campo-cf--cheia { grid-column: 1 / -1; }
}

.est-itens-cf { display: flex; flex-direction: column; gap: var(--space-4); }
.est-itens-cf__cab { display: flex; flex-direction: column; gap: var(--space-1); }
.est-itens-cf__titulo { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.est-itens-cf__ajuda { color: var(--text-secondary); font-size: var(--text-sm); max-width: 62ch; }
.est-itens-cf > .btn-cf { align-self: flex-start; }

.est-linhas-cf { display: flex; flex-direction: column; gap: var(--space-3); }
/* Cada item e um cartao: no celular uma coluna; a partir de 992px os campos ficam numa fileira. */
.est-linha-cf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  align-items: end;
}
.est-linha-cf__produto { grid-column: 1 / -1; }
.est-linha-cf__conta { grid-column: 1 / 2; align-self: center; color: var(--text-secondary); font-size: var(--text-sm); min-height: 1.5em; font-variant-numeric: tabular-nums; }
.est-linha-cf__remover { justify-self: end; min-width: 44px; min-height: 44px; }
:root[data-theme='dark'] .est-linha-cf { box-shadow: none; border: 1px solid var(--card-border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .est-linha-cf { box-shadow: none; border: 1px solid var(--card-border); }
}
@media (min-width: 992px) {
  .est-linha-cf { grid-template-columns: minmax(14rem, 2.4fr) minmax(6rem, 1fr) minmax(7rem, 1fr) minmax(6rem, 0.9fr) minmax(8rem, 1.1fr) auto; }
  .est-linha-cf__produto { grid-column: auto; }
  /* A conta ao vivo ocupa a fileira de baixo, alinhada a esquerda. */
  .est-linha-cf__conta { grid-column: 1 / -2; grid-row: 2; }
  .est-linha-cf__remover { grid-column: -2 / -1; grid-row: 1; }
}

/* ---------- Rodape com a conta ao vivo ---------- */
.est-total-cf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8);
  padding: var(--space-5);
}
/* Fixo no rodape so onde nao ha barra de abas embaixo (ela cobriria o botao). */
@media (min-width: 992px) { .est-total-cf { position: sticky; bottom: var(--space-3); z-index: 5; } }
.est-total-cf__bloco { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-total-cf__rotulo { color: var(--text-secondary); font-size: var(--text-sm); }
.est-total-cf__bloco strong { font-size: var(--text-xl); color: var(--text-primary); }
.est-total-cf__acoes { display: flex; flex-direction: column; gap: var(--space-2); margin-left: auto; align-items: flex-end; min-width: 0; max-width: 100%; }
.est-erro-cf { color: var(--color-danger); font-size: var(--text-sm); font-weight: var(--fw-medium); text-align: right; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .est-total-cf__acoes { width: 100%; align-items: stretch; margin-left: 0; }
  .est-total-cf__acoes .btn-cf { width: 100%; justify-content: center; }
  .est-erro-cf { text-align: left; }
}

/* ---------- Abas da tela ---------- */
/* No celular as abas cabem inteiras (sem icone e com folga menor): a trilha rola por dentro
   quando sobra aba, mas nenhuma delas pode nascer cortada na borda direita. */
@media (max-width: 575.98px) {
  #est-abas .tabs-cf__tab { padding-inline: 0.8rem; }
  #est-abas .tabs-cf__tab > i { display: none; }
}

/* Seis abas no celular: em vez de rolar (a ultima nasceria cortada na borda), quebram em fileiras. */
@media (max-width: 575.98px) {
  #est-abas { flex-wrap: wrap; width: 100%; border-radius: var(--radius-card); }
  #est-abas .tabs-cf__tab { flex: 1 1 auto; }
}

/* ---------- Avisos da tela (resultado do inventario, saldo mudou, lista cortada) ---------- */
.est-aviso-cf {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-card);
  background: var(--color-warning-soft); color: var(--color-warning-ink); font-size: var(--text-sm); overflow-wrap: anywhere;
}
.est-aviso-cf--ok { background: var(--color-success-soft); color: var(--color-success-ink); }
.est-aviso-cf--alerta { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.est-aviso-cf p:last-child { margin-bottom: 0; }
:root[data-theme='dark'] .est-aviso-cf--alerta { background: rgba(251, 191, 36, 0.14); }
:root[data-theme='dark'] .est-aviso-cf--ok { background: rgba(34, 197, 94, 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .est-aviso-cf--alerta { background: rgba(251, 191, 36, 0.14); }
  :root:not([data-theme='light']) .est-aviso-cf--ok { background: rgba(34, 197, 94, 0.14); }
}
.est-resumo-linha-cf { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-3); }

/* ---------- Perdas ---------- */
.est-perda-cf { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.est-perda-cf__campos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.est-perda-cf__conta { color: var(--text-secondary); font-size: var(--text-sm); min-height: 1.5em; overflow-wrap: anywhere; }
.est-perda-cf__conta:empty { display: none; }
.est-perda-cf__acoes { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
.est-perda-cf__acoes .btn-cf { justify-content: center; }
@media (min-width: 768px) {
  .est-perda-cf__campos { grid-template-columns: minmax(14rem, 2fr) 8rem minmax(10rem, 1fr); }
  .est-perda-cf__obs { grid-column: 1 / -1; }
  .est-perda-cf__acoes { flex-direction: row; justify-content: flex-end; align-items: center; }
  .est-perda-cf__acoes .est-erro-cf { margin-right: auto; text-align: left; }
}
.est-hist-cf { margin-top: var(--space-8); }
.est-hist-cf__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.est-hist-cf__filtro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; }
@media (min-width: 576px) { .est-hist-cf__filtro { width: auto; grid-template-columns: 11rem 11rem; } }

/* ---------- Inventario ---------- */
.est-inv-filtros { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.est-inv-dica { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
@media (min-width: 768px) { .est-inv-filtros { grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) minmax(12rem, 1fr); } }

.est-inv-card { padding: 0; overflow: hidden; }
.est-inv-lista { list-style: none; margin: 0; padding: 0; }
.est-inv-cab { display: none; }
/* Contagem cega: so o produto e o campo de contagem. */
.est-inv-card.is-cega .est-inv-linha { grid-template-columns: minmax(0, 1fr); }
.est-inv-cfg { padding: var(--space-4); }
.est-inv-cfg__titulo { cursor: pointer; font-weight: 600; min-height: 24px; }
.est-inv-cfg__titulo:focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 2px; border-radius: 4px; }
.est-inv-cfg__texto { margin: var(--space-3) 0; color: var(--text-secondary); max-width: 60ch; }
.est-inv-cfg__campos { display: grid; gap: var(--space-3); align-items: end; }
.est-inv-cfg__campos .form-control { min-height: 44px; font-size: 1rem; }
.est-inv-rot { color: var(--text-secondary); font-size: var(--text-sm); }

.est-inv-linha {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4);
  padding: var(--space-4); border-top: 1px solid var(--border-color); align-items: start;
}
.est-inv-lista > .est-inv-linha:first-child { border-top: 0; }
.est-inv-linha__nome { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.est-inv-linha__sist, .est-inv-linha__cont, .est-inv-linha__dif, .est-inv-linha__val { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.est-inv-linha__entrada { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.est-inv-in { min-height: 44px; font-size: 1rem; min-width: 0; flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.est-inv-confere { flex: none; min-width: 44px; min-height: 44px; }
.est-inv-valor { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.est-inv-valor.is-mais { color: var(--presente); }
.est-inv-valor.is-menos { color: var(--falta); }
.est-inv-valor.is-zero { color: var(--text-muted); font-weight: var(--fw-medium); }
.est-inv-linha.is-mudou { background: var(--color-warning-soft); box-shadow: inset 3px 0 0 var(--color-warning); }
.est-inv-mudou { color: var(--color-warning-ink); font-size: var(--text-sm); font-weight: var(--fw-medium); }
:root[data-theme='dark'] .est-inv-linha.is-mudou { background: rgba(251, 191, 36, 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .est-inv-linha.is-mudou { background: rgba(251, 191, 36, 0.14); }
}
@media (min-width: 768px) {
  .est-inv-cab, .est-inv-linha {
    display: grid; grid-template-columns: minmax(0, 1fr) 5rem 10rem 5.5rem 8.5rem; gap: var(--space-4); align-items: center;
  }
  .est-inv-cab { padding: var(--space-3) var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); border-bottom: 1px solid var(--border-color); }
  .est-inv-cab > span:nth-child(n+2) { text-align: right; }
  .est-inv-cab > span:nth-child(3) { text-align: left; }
  .est-inv-linha { padding: var(--space-2) var(--space-4); }
  .est-inv-card.is-cega .est-inv-cab, .est-inv-card.is-cega .est-inv-linha { grid-template-columns: minmax(0, 1fr) 12rem; }
  .est-inv-card.is-cega .est-inv-cab > span:nth-child(2) { text-align: left; }
  .est-inv-cfg__campos { grid-template-columns: minmax(0, 14rem) minmax(0, 14rem) auto; justify-content: start; }
  .est-inv-linha__nome { grid-column: auto; }
  .est-inv-linha__sist, .est-inv-linha__dif, .est-inv-linha__val { align-items: flex-end; text-align: right; }
  /* O cabecalho da tabela rotula as colunas: o rotulo de cada celula so existe para leitor de tela. */
  .est-inv-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .est-inv-in { min-height: 38px; text-align: right; }
  .est-inv-confere { min-width: 36px; min-height: 36px; }
}
.est-total-cf__nota { color: var(--text-secondary); font-size: var(--text-sm); max-width: 22rem; }
.est-total-cf__nota:empty { display: none; }
.est-total-cf__nota.is-alerta { color: var(--color-danger-ink); font-weight: var(--fw-medium); }
.est-inv-acoes { flex-direction: column; align-items: stretch; }
.est-inv-acoes__motivo { min-width: 0; }
.est-inv-acoes .btn-cf { justify-content: center; }
@media (min-width: 768px) { .est-inv-acoes { min-width: 20rem; } .est-inv-acoes .est-erro-cf { text-align: left; } }

/* ---------- Lista de compras ---------- */
.est-lc-resumo { padding: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.est-lc-exportar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.est-lc-grupo { padding: 0; overflow: hidden; margin-bottom: var(--space-4); }
.est-lc-grupo__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); }
.est-lc-grupo__nome { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.est-lc-grupo__total { color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.est-lc-lista { list-style: none; margin: 0; padding: 0; }
.est-lc-cab { display: none; }
.est-lc-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-color); align-items: start; }
.est-lc-lista > .est-lc-linha:first-child { border-top: 0; }
.est-lc-linha__nome { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.est-lc-linha__comprar, .est-lc-linha__emb, .est-lc-linha__est { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.est-lc-linha__comprar { grid-column: 1 / -1; }
.est-lc-linha__acao { grid-column: 1 / -1; }
.est-lc-linha__acao .btn-cf { width: 100%; justify-content: center; min-height: 44px; }
@media (min-width: 768px) {
  .est-lc-linha { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 10rem; align-items: center; }
  .est-lc-cab { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 10rem; gap: var(--space-4); padding: var(--space-3) var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); border-bottom: 1px solid var(--border-color); }
  .est-lc-linha__nome, .est-lc-linha__comprar, .est-lc-linha__acao { grid-column: auto; }
  .est-lc-linha__acao { justify-self: end; }
  .est-lc-linha__acao .btn-cf { width: auto; min-height: 0; white-space: nowrap; }
  .est-lc-linha .est-inv-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.est-lc-mov { padding: var(--space-5); }
.est-lc-mov__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; }
.est-lc-mov__campos > .est-campo-cf:nth-child(3), .est-lc-mov__botoes { grid-column: 1 / -1; }
.est-lc-mov__botoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.est-lc-mov__botoes .btn-cf { flex: 1 1 8rem; justify-content: center; }
@media (min-width: 768px) {
  .est-lc-mov__campos { grid-template-columns: 11rem 11rem minmax(12rem, 16rem) auto; }
  .est-lc-mov__campos > .est-campo-cf:nth-child(3), .est-lc-mov__botoes { grid-column: auto; }
  .est-lc-mov__botoes .btn-cf { flex: none; }
}