/* Estoque por Depósito — inventário físico, valor e correções de cadastro.
   Prefixo `ed-`. Reusa .kpi-grid/.kpi-card, .table-wrap/.table-sticky e .ms-wrap
   do app.css; aqui mora só o que é próprio desta tela. */

/* ── Faixa de leitura: quando o dado foi lido e de onde ── */
.ed-frescor {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; color: #6c757d; margin: -.25rem 0 .75rem;
}
.ed-frescor .ed-fonte { font-weight: 600; color: #495057; }
.ed-frescor button { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .45rem; font-size: .78rem; }

/* ── Pendências: o bloco de ação, logo abaixo dos KPIs ── */
.ed-pend-sec { margin: 1rem 0 .25rem; }
.ed-pend-titulo {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .95rem; font-weight: 700; color: #212529; margin-bottom: .1rem;
}
.ed-pend-titulo small { font-weight: 400; color: #6c757d; font-size: .8rem; }

.ed-pend-grid {
  display: grid; gap: .6rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.ed-pend {
  display: flex; flex-direction: column; gap: .2rem;
  border: 1px solid #dee2e6; border-left: 4px solid var(--ed-tom, #adb5bd);
  border-radius: .45rem; background: #fff; padding: .6rem .7rem;
  text-align: left; width: 100%; cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ed-pend:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .09); }
.ed-pend.ed-on { border-color: var(--ed-tom, #adb5bd); background: var(--ed-tom-bg, #f8f9fa); }
.ed-pend-topo { display: flex; align-items: baseline; gap: .4rem; }
.ed-pend-n { font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--ed-tom, #495057); }
.ed-pend-l { font-size: .85rem; font-weight: 600; color: #212529; }
.ed-pend-e { font-size: .76rem; color: #6c757d; line-height: 1.3; }
.ed-pend-a {
  font-size: .78rem; font-weight: 600; color: var(--ed-tom, #495057);
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .15rem;
}
/* Tom da faixa: sai do dado (qual pendência, e se está zerada), não do markup. */
.ed-t-corrigir { --ed-tom: #C92A2A; --ed-tom-bg: #fff5f5; }
.ed-t-revisar  { --ed-tom: #B38600; --ed-tom-bg: #fffbeb; }
.ed-t-zero     { --ed-tom: #2F9E44; --ed-tom-bg: #ebfbee; }
.ed-pend-zero { cursor: default; }
.ed-pend-zero:hover { box-shadow: none; }
.ed-pend-zero .ed-pend-a { display: none; }

/* Vazio por FILTRO é diferente de vazio bom: cinza, não verde — nada foi
   resolvido, só recortado. */
.ed-vazio-filtro { background: #f8f9fa; border-color: #dee2e6; color: #495057; }

/* Vazio bom: nada a corrigir é resultado, não ausência de dado. */
.ed-tudo-certo {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid #b2f2bb; background: #ebfbee; color: #2B8A3E;
  border-radius: .45rem; padding: .6rem .8rem; font-size: .86rem; margin-top: .5rem;
}

/* ── Filtro ativo vindo do clique numa tabela-mãe / num card ── */
.ed-filtro-ativo {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  background: #e7f5ff; border: 1px solid #a5d8ff; color: #1864AB;
  border-radius: .45rem; padding: .35rem .6rem; font-size: .82rem; margin: .6rem 0;
}
.ed-filtro-ativo b { font-weight: 700; }

/* ── Cards de tabela: cada tabela tem título, descrição e contador próprios ── */
.ed-card {
  border: 1px solid #dee2e6; border-radius: .5rem; background: #fff;
  padding: .75rem .85rem; margin-top: 1rem;
}
.ed-card-cab { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .1rem; }
.ed-card-cab h3 { font-size: .98rem; font-weight: 700; margin: 0; color: #212529; }
.ed-card-cab .ed-contador {
  font-size: .78rem; font-weight: 600; color: #495057;
  background: #f1f3f5; border-radius: 1rem; padding: .05rem .5rem;
}
.ed-card-desc { font-size: .8rem; color: #6c757d; margin: 0 0 .5rem; }

/* ── Tabela-mãe (depósitos): a linha inteira navega para o detalhe ── */
.ed-dep-row { cursor: pointer; }
.ed-dep-row:hover { background: #f1f3f5; }
.ed-dep-row.ed-on { background: #e7f5ff; }
.ed-dep-nome { display: flex; align-items: center; gap: .4rem; }
.ed-dep-cod {
  font-size: .72rem; color: #868e96; background: #f1f3f5;
  border-radius: .25rem; padding: 0 .3rem; font-variant-numeric: tabular-nums;
}

/* ── Etiquetas de pendência dentro do detalhe ── */
.ed-tags { display: flex; flex-wrap: wrap; gap: .2rem; }
.ed-tag {
  font-size: .68rem; font-weight: 600; white-space: nowrap;
  border-radius: .25rem; padding: .02rem .3rem; border: 1px solid transparent;
}
.ed-tag-corrigir { background: #ffe3e3; color: #C92A2A; border-color: #ffc9c9; }
.ed-tag-revisar  { background: #fff3bf; color: #B38600; border-color: #ffec99; }
.ed-tag-suspeito { background: #f1f3f5; color: #495057; border-color: #dee2e6; }

.ed-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-fraco { color: #adb5bd; }

/* ── Método: a regra do recorte em português, sob demanda ── */
.ed-metodo { margin-top: 1rem; font-size: .82rem; color: #495057; }
.ed-metodo > summary { cursor: pointer; font-weight: 600; color: #1971C2; }
.ed-metodo dl { margin: .5rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; }
.ed-metodo dt { font-weight: 600; color: #212529; }
.ed-metodo dd { margin: 0; }

/* ── 375×812: card quebra, tabela rola dentro do container, ação continua à mão ── */
@media (max-width: 575.98px) {
  .ed-pend-grid { grid-template-columns: 1fr; }
  .ed-metodo dl { grid-template-columns: 1fr; gap: .1rem; }
  .ed-metodo dd { margin-bottom: .4rem; }
  .ed-card { padding: .6rem .5rem; }
}

/* ── Largura do detalhe: as colunas de dinheiro são o motivo da tela existir,
   então elas não podem ficar atrás de uma rolagem horizontal em 1366×768.
   `table-layout: fixed` + colgroup dá largura previsível; o `min-width` impede
   que a tabela se esprema a ponto de o valor não caber, e abaixo disso é o
   container que rola — nunca a página. */
/* Precisa vencer `.table-wrap table { min-width: max-content }` do app.css —
   aquele max-content é o que estica a tabela até 1770px e joga o dinheiro para
   fora da tela. Daí o seletor com os dois níveis. */
.table-wrap table.ed-tab { table-layout: fixed; width: 100%; min-width: 1000px; }
/* Somam exatamente 100%: com 110% a tabela nasce 10% mais larga que o card e a
   ultima coluna cai fora mesmo com layout fixo. */
.ed-tab col.ed-c-cod { width: 13.5%; }   /* o código nunca corta: é como o setor acha o material */
.ed-tab col.ed-c-mat { width: 20%; }
.ed-tab col.ed-c-gru { width: 11.5%; }
.ed-tab col.ed-c-dep { width: 9.5%; }
.ed-tab col.ed-c-sal { width: 8.5%; }
.ed-tab col.ed-c-val { width: 12.5%; }   /* × 2 (venda e custo) */
.ed-tab col.ed-c-cad { width: 12%; }

/* Texto longo corta com reticências e o conteúdo inteiro fica no title. */
.ed-corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O código tem largura garantida e não usa reticências — cortar o identificador
   obriga o usuário a passar o mouse em cada linha para saber do que se trata. */
.ed-tab td:first-child { text-overflow: clip; }

.ed-un { font-size: .74rem; color: #868e96; }

/* Valor em cima, unitário embaixo — o unitário é contexto, não concorrente. */
.ed-dupla { line-height: 1.15; padding-top: .3rem; padding-bottom: .3rem; }
.ed-valor { display: block; }
.ed-unit  { display: block; font-size: .72rem; color: #868e96; }

/* Etiquetas de cadastro quebram em linha; a coluna não estica por causa delas. */
.ed-tab .ed-tags, .ed-tab .ed-tag { white-space: normal; }

/* Cabeçalho de duas palavras tem de quebrar em vez de cortar. Precisa do
   `th.sortable` porque `.table-sticky th.sortable` do app.css fixa `nowrap` e
   ganha de um seletor com menos classes. */
.ed-tab thead th, .ed-tab thead th.sortable { white-space: normal; }
.ed-tab thead th { line-height: 1.15; vertical-align: bottom; }

/* ── Filtros em duas faixas: escopo muda a tela toda, detalhe recorta a tabela.
   O rótulo à esquerda existe para o usuário saber o alcance antes de clicar. */
.ed-filtros { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; }
.ed-filtros-linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ed-filtros-rot {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #868e96; background: #f1f3f5; border-radius: .25rem;
  padding: .15rem .45rem; min-width: 4.4rem; text-align: center; cursor: help;
}
.ed-data { width: 218px; }

/* ── Posição retroativa: precisa ficar evidente, senão o usuário lê o número de
   um mês atrás como se fosse o de hoje. */
.ed-retro {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: #fff9db; border: 1px solid #ffe066; color: #8a6d00;
  border-radius: .45rem; padding: .45rem .7rem; font-size: .82rem; margin-bottom: .5rem;
}

/* ── Gráfico de evolução ── */
.ed-chart-wrap { position: relative; height: 260px; }
.ed-leitura {
  font-size: .85rem; color: #212529; margin: 0 0 .6rem;
  background: #f8f9fa; border-left: 3px solid #1971C2;
  border-radius: 0 .3rem .3rem 0; padding: .4rem .6rem;
}
.ed-leitura b { font-weight: 700; }

/* Depósito fora do escopo continua na tabela-mãe, esmaecido: sumir faria parecer
   que ele não existe mais. */
.ed-dep-row.ed-fora { opacity: .45; }

@media (max-width: 575.98px) {
  .ed-filtros-rot { min-width: 0; }
  .ed-data { width: 100%; }
  .ed-chart-wrap { height: 220px; }
}