/* Enok: só o que o sistema (tokens.css + componentes.css) não cobre — cartão de foto,
 * drawer, modal de saída em 2 passos e toasts. Zero literal de cor: só var().
 * A casca (.quadro/.lateral/.perfil/.tabela/.painel/.estado/.botao/.campo/...) é 100% do
 * sistema visual; nada disso é redeclarado aqui.
 */

/* -------------------------------------------------------------------- barra do estoque */
.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

.barra-busca {
  position: relative;
  flex: 1;
  min-width: 12rem;
}

.barra-busca .icone {
  position: absolute;
  left: var(--e-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-4);
}

.barra-busca input {
  padding-left: var(--e-9);
}

.barra select {
  width: auto;
}

.filtro-grupo {
  display: flex;
  gap: var(--e-1);
}

/* modo editor: quando ligado, vira chip na cor de alerta do sistema (destrava escrita) */
.editor-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.editor-toggle.ligado {
  color: var(--aviso-tinta);
  background: var(--aviso-fundo);
  border-color: var(--aviso-tinta);
}

.editor-toggle.ligado .icone {
  color: var(--aviso-tinta);
}

/* -------------------------------------------------------------------------- KPIs */
.kpis {
  margin-bottom: var(--e-6);
}

/* --------------------------------------------------------------------- cards de item */
.grade-itens {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.item-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-repouso), var(--sombra-interna);
}

.item-foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--fundo-afundado);
}

.item-foto.sem {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-4);
  font-size: var(--t-menor);
}

.item-card .item-corpo {
  padding: var(--e-4);
}

.item-card .item-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.mini-foto {
  width: var(--e-8);
  height: var(--e-8);
  flex: none;
  object-fit: cover;
  background: var(--fundo-afundado);
  border-radius: var(--raio-2);
}

/* seleção nos cards (M3): canto do card, sempre por cima da foto */
.item-card {
  position: relative;
}

.item-check {
  position: absolute;
  z-index: 1;
  top: var(--e-2);
  left: var(--e-2);
  display: flex;
  padding: var(--e-1);
  background: var(--superficie);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-repouso);
}

.item-check input {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* -------------------------------------------------------------- coluna fixa da tabela
 * a 1a coluna (foto+produto, e o checkbox quando o editor esta ligado) fica grudada a
 * esquerda quando a tabela rola na horizontal (pedido do Thiago, 18/09): uma coluna so,
 * "simples", por isso o fundo opaco proprio -- senao o texto das colunas que passam por
 * baixo aparece atras dela. `tr.alerta`/`:hover` do sistema tem mais especificidade e
 * seguem pintando por cima normalmente. */
.tabela td.col-fixa,
.tabela th.col-fixa {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 15rem;
  background: var(--superficie);
  border-right: var(--borda) solid var(--linha-forte);
}

.tabela thead th.col-fixa {
  z-index: 2;
}

.col-fixa-linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  cursor: pointer;
}

.col-fixa-linha input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
}

/* miniatura AO LADO do nome (D3, 18/09): o texto e um filho flex que pode encolher
   (min-width: 0) e o nome nao quebra linha -- corta com reticencias (title mostra inteiro),
   entao a linha tem sempre a altura de uma miniatura, igual as outras. */
.col-fixa-linha .produto-texto {
  display: block;
  min-width: 0;
}

.col-fixa-linha .produto-nome {
  display: block;
  max-width: 16rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------- rolagem lateral visivel
 * D1 (18/09): no macOS a barra de rolagem e overlay (some quando o mouse para), entao a
 * tabela larga parecia nao rolar. Barra propria de 10px, sempre visivel, com tokens.
 * So `::-webkit-scrollbar` aqui: no Chromium, `scrollbar-color`/`scrollbar-width` declarados
 * VENCEM o ::-webkit-scrollbar e devolvem a barra overlay nativa (medido em
 * saida/ferramentas/experimento_scrollbar.py) -- por isso o par padrao so entra no Firefox,
 * via @supports not selector(). */
.painel > .rolagem::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.painel > .rolagem::-webkit-scrollbar-track {
  background: var(--superficie);
  border-top: var(--borda) solid var(--linha-fraca);
}

.painel > .rolagem::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border: 2px solid var(--superficie);
  border-radius: var(--raio-pilula);
}

.painel > .rolagem::-webkit-scrollbar-thumb:hover {
  background: var(--tinta-4);
}

@supports not selector(::-webkit-scrollbar) {
  .painel > .rolagem {
    scrollbar-width: thin;
    scrollbar-color: var(--linha-forte) var(--superficie);
  }
}

/* sombra na borda direita enquanto houver coluna escondida (some ao chegar no fim):
 * 4 camadas, as `local` sao a cor da superficie da tabela e cobrem a sombra na ponta
 * (LIC-037, item 3). A esquerda fica sob a coluna fixa opaca; e a borda dela que marca. */
.painel > .rolagem {
  background:
    linear-gradient(90deg, var(--superficie) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--superficie) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--cortina), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--cortina), transparent) right / 14px 100% no-repeat scroll;
}

/* --------------------------------------------------------------------------- drawer */
.veu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--cortina);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tempo) var(--curva);
}

.veu.aberto {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(32rem, 100vw);
  background: var(--superficie);
  box-shadow: var(--sombra-levantado);
  transform: translateX(100%);
  transition: transform var(--tempo) var(--curva);
}

.drawer.aberto {
  transform: none;
}

@media (max-width: 640px) {
  .drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--raio-4) var(--raio-4) 0 0;
    transform: translateY(100%);
  }

  .drawer.aberto {
    transform: none;
  }
}

.d-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: var(--borda) solid var(--linha);
}

.d-topo h2 {
  flex: 1;
  margin: 0;
  font-size: var(--t-medio);
  line-height: var(--altura-titulo);
}

.d-corpo {
  flex: 1;
  padding: 0 var(--e-5) var(--e-5);
  overflow: auto;
}

.d-foto {
  width: 100%;
  max-height: 16rem;
  object-fit: contain;
  background: var(--fundo-afundado);
  border-radius: var(--raio-3);
  margin: var(--e-4) 0;
}

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3) var(--e-4);
}

.campo-largo {
  grid-column: 1 / -1;
}

.campo-v {
  min-height: var(--e-6);
  font-size: var(--t-menor);
  word-break: break-word;
}

.d-acoes {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border-top: var(--borda) solid var(--linha);
}

.d-acoes .botao {
  flex: 1;
}

.caixa {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-top: var(--borda) solid var(--linha-fraca);
}

.cx-info {
  flex: 1;
  font-size: var(--t-menor);
}

/* ----------------------------------------------------------------- modal (2 passos) */
.modal {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 50%;
  width: min(26rem, 92vw);
  padding: var(--e-5);
  background: var(--superficie);
  border-radius: var(--raio-4);
  box-shadow: var(--sombra-levantado);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.97);
  transition: opacity var(--tempo) var(--curva), transform var(--tempo) var(--curva);
}

.modal.aberto {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.passos {
  display: flex;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.passos i {
  flex: 1;
  height: 4px;
  border-radius: var(--raio-pilula);
  background: var(--linha);
  font-style: normal;
}

.passos i.on {
  background: var(--aviso-tinta);
}

.qtdbox {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-4) 0;
}

.qtdbox input {
  width: 4.5rem;
  text-align: center;
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
}

.resumo-saida {
  padding: var(--e-4);
  margin-bottom: var(--e-4);
  background: var(--aviso-fundo);
  border-radius: var(--raio-3);
  font-size: var(--t-menor);
}

.m-acoes {
  display: flex;
  gap: var(--e-2);
}

.m-acoes .botao {
  flex: 1;
}

/* segure pra confirmar: barra que enche em 1.1s, cancela se soltar antes (nunca clique
   acidental derruba estoque) */
.segurar {
  position: relative;
  overflow: hidden;
}

.segurar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--acento-tinta);
  opacity: .25;
}

.segurar.indo::after {
  width: 100%;
  transition: width 1.1s linear;
}

/* ------------------------------------------------------------- barra de mudanca em massa
 * so aparece com o editor ligado e algo selecionado (M3). Mesma faixa de z-index do
 * `.feedback-flutuante` do sistema (3: acima do conteudo, abaixo de cortina/gaveta) --
 * como ela fica CENTRADA (o feedback e um pill no canto direito) as duas nao se cobrem
 * no Enok hoje; se um dia o feedback entrar aqui tambem, o gap embaixo dela e que evita
 * a sobreposicao, nao um ajuste de z-index. Sempre com a folga do `env(safe-area-inset-
 * bottom)` do celular. */
.barra-massa {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  width: max-content;
  max-width: min(40rem, 92vw);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-levantado), var(--sombra-interna);
}

.barra-massa-conta {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .barra-massa {
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
    max-width: 96vw;
  }
}

/* ------------------------------------------------------------------------- toasts */
.toasts {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: min(26rem, 92vw);
  transform: translateX(-50%);
}

.toast {
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-menor);
  color: var(--acento-tinta);
  background: var(--acento);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-levantado);
}

.toast.ok {
  color: var(--ok-tinta);
  background: var(--ok-fundo);
}

.toast.erro {
  color: var(--erro-tinta);
  background: var(--erro-fundo);
}

/* --------------------------------------------------------------------- aba Marcas */
.marca-linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.marca-linha input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.sugestao-cartao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  margin-bottom: var(--e-3);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--raio-3);
}

.sugestao-cartao .chip {
  font-family: var(--fonte-mono);
}

@media (max-width: 640px) {
  .campos {
    grid-template-columns: 1fr;
  }

  .barra select,
  .barra .campo {
    flex: 1;
    min-width: 8rem;
  }

  /* alvo de toque 44px (WCAG 2.2): os botoes pequenos do sistema ficam em --alvo (36px) */
  .qtdbox button,
  .m-acoes .botao,
  .item-card .botao,
  td .botao {
    min-height: var(--alvo-toque);
  }
}

@media (prefers-reduced-motion: reduce) {
  .veu, .drawer, .modal, .segurar::after {
    transition: none;
  }
}

/* 18/09/2026 (Thiago, print): "a tabela tem que encostar até lá no fim". O Enok e um painel de
 * tabela larga: o teto de leitura do sistema (--conteudo-max, 76rem) deixava um vazio a direita
 * em telas grandes. Aqui o conteudo ocupa a largura toda; a rolagem continua dentro do .painel. */
.conteudo {
  max-width: none;
}

/* placeholder "sem foto": cabia mal no quadrado de 40px (quebrava em 2 linhas soltas).
 * Mesmo quadrado da miniatura, texto pequeno e centralizado, nunca estoura. */
.mini-foto.sem {
  display: grid;
  place-items: center;
  font-size: var(--t-rotulo);
  line-height: 1.1;
  text-align: center;
  color: var(--tinta-3);
  overflow: hidden;
}