/* ============================================================================
   Cantoário WMS — Painel do início

   Indicadores e gráficos. Nenhum valor literal: cor, espaço, tamanho e sombra
   saem de design-system.css, e as cores das séries saem de
   design-system.radzen.css — por isso o painel acompanha o tema sozinho.
   ============================================================================ */

.wms-painel-inicio {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

/* --------------------------------------------------------------------------
   INDICADORES
   -------------------------------------------------------------------------- */

/* Encolhe por conta: com 6 cartões, fixar o número de colunas quebraria em
   monitor de 1366px, que é o que existe no galpão. */
.wms-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--espaco-4);
}

.wms-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao-media), transform var(--transicao-media);
}

/* Levanta ao passar o ponteiro. Diz que o cartão é uma unidade de leitura, e
   prepara o dia em que ele levar a uma tela. */
.wms-kpi:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.wms-kpi__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
}

.wms-kpi__simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--espaco-7);
  height: var(--espaco-7);
  border-radius: var(--raio-md);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
}

/* Situação de mercadoria tinge o símbolo, e não o cartão inteiro: fundo colorido
   em seis cartões lado a lado vira ruído e some com a hierarquia. */
.wms-kpi--quarentena .wms-kpi__simbolo {
  background: var(--cor-status-quarentena-fundo);
  color: var(--cor-status-quarentena);
}

.wms-kpi__variacao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: var(--fonte-tam-xs);
  font-weight: var(--fonte-peso-medio);
  font-variant-numeric: tabular-nums;
}

.wms-kpi__variacao--sobe {
  color: var(--cor-sucesso);
}

.wms-kpi__variacao--desce {
  color: var(--cor-erro);
}

.wms-kpi__rotulo {
  margin: var(--espaco-2) 0 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-kpi__valor {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
  margin: 0;
  font-size: var(--fonte-tam-3xl);
  font-weight: var(--fonte-peso-forte);
  line-height: var(--fonte-altura-compacta);
  color: var(--cor-texto);
}

.wms-kpi__unidade {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-normal);
  color: var(--cor-texto-tenue);
}

.wms-kpi__apoio {
  margin: 0;
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
}

/* --------------------------------------------------------------------------
   GRÁFICOS
   -------------------------------------------------------------------------- */

.wms-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--espaco-4);
}

.wms-grafico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-1);
}

/* A série do tempo ocupa a linha inteira: catorze colunas espremidas em meia
   largura deixam de mostrar a tendência, que é a única coisa que ela tem a dizer. */
.wms-grafico--largo {
  grid-column: 1 / -1;
}

.wms-grafico__topo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.wms-grafico__titulo {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-forte);
  color: var(--cor-texto);
}

.wms-grafico__apoio {
  margin: 0;
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-grafico .rz-chart {
  width: 100%;
  height: 18rem;
}

/* --------------------------------------------------------------------------
   ROSCA DE STATUS

   Quando a série É status de mercadoria, a fatia usa a cor do próprio status, e
   não a paleta genérica de séries: o chip do grid e a fatia do gráfico precisam
   ser a mesma cor, senão o mesmo dado se lê de dois jeitos na mesma tela.

   A ordem segue DadosDeExemplo.SaldoPorStatus, e é conferida por teste —
   reordenar a lista sem reordenar aqui trocaria as cores em silêncio.
   -------------------------------------------------------------------------- */

.wms-grafico--status .rz-series-item-0 path {
  fill: var(--cor-status-liberado);
}

.wms-grafico--status .rz-series-item-1 path {
  fill: var(--cor-status-quarentena);
}

.wms-grafico--status .rz-series-item-2 path {
  fill: var(--cor-status-inspecao);
}

.wms-grafico--status .rz-series-item-3 path {
  fill: var(--cor-status-bloqueado);
}

/* --------------------------------------------------------------------------
   LEGENDA COM NÚMERO

   Fatia sem número obriga a estimar proporção no olho. Aqui a rosca ilustra e a
   lista informa.
   -------------------------------------------------------------------------- */

.wms-legenda {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wms-legenda__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding-top: var(--espaco-2);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

.wms-legenda__item:first-child {
  border-top: none;
  padding-top: 0;
}

.wms-legenda__valor {
  font-weight: var(--fonte-peso-forte);
  color: var(--cor-texto);
}

/* ============================================================================
   CAIXA DE NOTIFICAÇÕES

   Lista à esquerda, conteúdo à direita. Formato de caixa de entrada: quem varre
   avisos abre muitos, e navegar a cada abertura recarregaria a lista toda vez.
   ============================================================================ */

.wms-caixa {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) 1fr;
  gap: var(--espaco-4);
  align-items: start;
}

.wms-caixa__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  margin: 0;
  padding: var(--espaco-2);
  list-style: none;
  max-height: 70vh;
  overflow-y: auto;
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-1);
}

.wms-caixa__item {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  width: 100%;
  min-height: var(--alvo-min);
  padding: var(--espaco-3);
  border: none;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: var(--fonte-tam-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao-media);
}

.wms-caixa__item:hover {
  background: var(--cor-fundo-sutil);
}

.wms-caixa__item:active {
  transform: scale(0.99);
}

.wms-caixa__item:focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: calc(var(--foco-largura) * -1);
}

/* A escolhida marca a ligação com o que está à direita. É a pista de "onde estou"
   da lista, e por isso usa a mesma pílula do item ativo do menu. */
.wms-caixa__item--escolhida,
.wms-caixa__item--escolhida:hover {
  background: var(--barra-ativo-fundo);
  color: var(--barra-ativo-texto);
}

/* Não lida em peso, não só em cor: negrito responde "isto é novo?" para quem não
   distingue as duas cores e para o monitor descalibrado do galpão. */
.wms-caixa__item--nao-lida .wms-caixa__titulo {
  font-weight: var(--fonte-peso-forte);
}

.wms-caixa__item--nao-lida .wms-caixa__simbolo {
  color: var(--cor-primaria-600);
}

.wms-caixa__simbolo {
  flex-shrink: 0;
  color: var(--cor-texto-tenue);
}

.wms-caixa__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
  flex: 1;
}

.wms-caixa__titulo,
.wms-caixa__subtitulo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wms-caixa__subtitulo {
  font-size: var(--fonte-tam-sm);
  color: var(--cor-texto-secundario);
}

.wms-caixa__momento {
  flex-shrink: 0;
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
  font-variant-numeric: tabular-nums;
}

.wms-caixa__detalhe {
  min-height: 20rem;
  padding: var(--espaco-5);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-1);
}

/* Em tela estreita as duas colunas viram uma. A casca não é desenhada para
   celular — o campo é do coletor —, mas também não quebra. */
@media (max-width: 60rem) {
  .wms-caixa {
    grid-template-columns: 1fr;
  }

  .wms-caixa__lista {
    max-height: 24rem;
  }
}

/* --------------------------------------------------------------------------
   UMA NOTIFICAÇÃO POR INTEIRO
   -------------------------------------------------------------------------- */

.wms-nota {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.wms-nota__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding-bottom: var(--espaco-3);
  border-bottom: var(--borda-largura) solid var(--cor-borda);
}

.wms-nota__simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--espaco-7);
  height: var(--espaco-7);
  flex-shrink: 0;
  border-radius: var(--raio-md);
  background: var(--cor-primaria-100);
  color: var(--cor-primaria-600);
}

.wms-nota__identidade {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
}

.wms-nota__titulo {
  margin: 0;
  font-size: var(--fonte-tam-xl);
  font-weight: var(--fonte-peso-forte);
  line-height: var(--fonte-altura-compacta);
  color: var(--cor-texto);
}

.wms-nota__subtitulo {
  margin: 0;
  font-size: var(--fonte-tam-md);
  color: var(--cor-texto-secundario);
}

.wms-nota__momento {
  margin: 0;
  font-size: var(--fonte-tam-xs);
  color: var(--cor-texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* O corpo é HTML de quem emitiu, já higienizado. Os estilos abaixo existem para
   ele não herdar o que a tela ao redor definiu, e para o conteúdo não conseguir
   se passar por controle do sistema — a lista de permissão recusa `style`. */
.wms-nota__corpo {
  font-size: var(--fonte-tam-md);
  line-height: var(--fonte-altura-padrao);
  color: var(--cor-texto);
  overflow-wrap: break-word;
}

.wms-nota__corpo p {
  margin: 0 0 var(--espaco-3);
}

.wms-nota__corpo ul,
.wms-nota__corpo ol {
  margin: 0 0 var(--espaco-3);
  padding-left: var(--espaco-5);
}

.wms-nota__corpo a {
  color: var(--cor-primaria-600);
  text-decoration: underline;
}

.wms-nota__corpo table {
  border-collapse: collapse;
  margin-bottom: var(--espaco-3);
}

.wms-nota__corpo th,
.wms-nota__corpo td {
  padding: var(--espaco-2) var(--espaco-3);
  border: var(--borda-largura) solid var(--cor-borda);
  text-align: left;
}

.wms-nota__acoes {
  display: flex;
  gap: var(--espaco-2);
  padding-top: var(--espaco-3);
  border-top: var(--borda-largura) solid var(--cor-borda);
}

/* Diálogo de uma notificação aberto pelo sino. */
.wms-dialogo-nota {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.wms-dialogo-nota__rodape {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================================
   EMISSÃO DE NOTIFICAÇÃO

   Três blocos, na ordem em que a decisão acontece: para quem, por onde, o quê.
   Escolher o destinatário antes de escrever é o que faz o alcance aparecer a
   tempo de mudar de ideia.
   ============================================================================ */

.wms-emissao {
  display: flex;
  flex-direction: column;
  gap: var(--gap-secao);
}

.wms-emissao__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--gap-campo);
  padding: var(--espaco-5);
  border: var(--borda-largura) solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo-elevado);
  box-shadow: var(--sombra-1);
}

.wms-emissao__titulo {
  margin: 0;
  font-size: var(--fonte-tam-lg);
  font-weight: var(--fonte-peso-forte);
  color: var(--cor-texto);
}

.wms-emissao__rotulo {
  font-size: var(--fonte-tam-sm);
  font-weight: var(--fonte-peso-medio);
  color: var(--cor-texto);
}

.wms-emissao__canais {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-5);
}

/* O alcance é aviso, não enfeite: quem escolheu um departamento por engano precisa
   ver o número antes de escrever o aviso, não na confirmação. */
.wms-emissao__alcance {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin: 0;
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-md);
  background: var(--cor-info-fundo);
  color: var(--cor-info);
  font-size: var(--fonte-tam-sm);
}

/* Alvo que não alcança ninguém não é informação neutra — é envio que vai ser
   recusado, e a cor precisa dizer isso antes de a pessoa tentar. */
.wms-emissao__alcance--vazio {
  color: var(--cor-aviso);
}

/* Altura de trabalho do editor: cabe um aviso de operação inteiro sem rolar, e
   quem escreve mais rola dentro dele em vez de esticar a página. */
.wms-emissao__editor {
  height: var(--editor-altura);
}

/* O editor de HTML herda a fonte e a borda do sistema; sem isto ele chega com a
   aparência da biblioteca no meio de um formulário que não é dela. */
.wms-emissao .rz-html-editor {
  border-radius: var(--raio-md);
  border-color: var(--cor-borda-forte);
  font-family: var(--fonte-base);
}