/* Estilos só da área "materias" (matéria-prima). O padrão geral está em app.css — aqui só o que falta, com prefixo mp-. */

/* Em notebook (1366 px) a tabela de 8 colunas não cabia ao lado do painel: o Status e o
   Custo médio ficavam escondidos (só rolando de lado). Os títulos quebram em 2 linhas
   ("Estoque / atual", como no layout), o código não quebra e, abaixo de 1400 px,
   o painel do item desce para baixo da tabela. */
.lado-a-lado.mp-lado { grid-template-columns: minmax(0, 1fr) 360px; }
#tabelaMaterias .tabela th { white-space: normal; }
#tabelaMaterias .tabela td:first-child { white-space: nowrap; }

@media screen and (max-width: 1400px) {
  .lado-a-lado.mp-lado { grid-template-columns: minmax(0, 1fr); }
}

/* entrada com NR no histórico do painel: o NR e o botão do rótulo (reimprimir) */
.mp-nr { font-size: 13px; margin-top: 2px; white-space: nowrap; }
.mp-nr .btn-link { font-size: 13px; display: inline-flex; align-items: center; gap: 3px; }
.mp-nr .btn-link svg { width: 14px; height: 14px; }

/* painel: últimas compras e "Nomes nos fornecedores" (como cada fornecedor escreve o item) */
.mp-lista { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.mp-lista li { padding: 8px 0; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 2px; }
.mp-lista li:last-child { border-bottom: 0; }
.mp-lista .etiqueta { font-size: 12px; padding: 1px 8px; min-width: 0; margin-left: 4px; }
.mp-dica { font-size: 13px; color: var(--texto-3); margin: 0 0 6px; }
.mp-nome-forn { overflow-wrap: anywhere; }
.mp-acoes-nome { display: flex; gap: 14px; }
.mp-acoes-nome .btn-link { font-size: 14px; }