/* =====================================================================
 *  KRIGGING - tela de NORMAS (public/js/normas.js): a lista das normas de
 *  referencia do plano de rigging, com a observacao e o PDF de cada empresa.
 *
 *  Toda classe daqui comeca por `nm-`. Cor, so por token.
 * ===================================================================== */

/* ---- avisos do topo: lista ainda nao carregada, normas nao conferidas -- */
.nm-aviso{
  border:1px solid var(--linha); border-left:4px solid var(--azul-2); border-radius:var(--raio-sm);
  background:var(--azul-claro); color:var(--texto); padding:10px 14px; margin:0 0 12px; font-size:13px;
}
.nm-aviso.atencao{ background:var(--amarelo-claro); border-color:var(--aviso-borda); color:var(--aviso-texto) }
.nm-aviso b{ font-weight:700 }

/* ---- filtros: cada um com o rotulo em cima, quebrando linha sozinhos --- */
/* Grade: a busca leva o que sobra, os quatro filtros tem a mesma largura e
   TODOS os campos e o botao Limpar tem a mesma altura, na mesma linha de base. */
.filtros.nm-filtros{
  display:grid; grid-template-columns:minmax(220px,1fr) repeat(4,minmax(150px,200px)) auto;
  align-items:end; gap:10px 12px; margin-bottom:10px;
}
.filtros .nm-filtro{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.filtros .nm-filtro label{ font-size:12px; font-weight:600; color:var(--cinza); margin:0; line-height:16px }
.filtros .nm-filtro select,.filtros .nm-filtro input{ width:100%; min-width:0; height:40px; box-sizing:border-box; padding-top:0; padding-bottom:0 }
.filtros.nm-filtros > .btn{ height:40px; box-sizing:border-box; padding-top:0; padding-bottom:0; align-self:end }
@media (max-width:1250px) and (min-width:821px){
  .filtros.nm-filtros{ grid-template-columns:repeat(4,1fr) auto }
  .filtros .nm-filtro.busca{ grid-column:1 / -1 }
}
.nm-contagem{ font-size:12px; color:var(--cinza); margin:0 0 8px }

/* ---- a tabela ---------------------------------------------------------
 * LARGURA FIXA POR COLUNA, em fracao da janela: a tabela ocupa a largura
 * inteira e NUNCA passa dela, em 1366 px ou em 1920 px. O texto comprido
 * (titulo de norma, orgao por extenso) quebra dentro da celula. */
#nm-lista td{ vertical-align:middle }
#nm-lista td.nm-codigo{ font-weight:700 }
#nm-lista td.nm-titulo b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
.nm-selos{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; font-weight:400 }
.nm-selos:empty{ display:none }
.nm-situacao{ display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.nm-situacao .badge{ white-space:normal; text-align:left }
.nm-fora{ opacity:.72 }
.nm-nada{ color:var(--cinza-2); font-style:italic }
.nm-aplicacao{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow:hidden;
  font-size:12px; color:var(--cinza); margin-top:2px;
}
.nm-obs-texto{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  white-space:pre-line; margin:0 0 4px; overflow-wrap:anywhere;
}
.nm-arquivo{ display:block; font-size:12px; color:var(--cinza); margin:0 0 4px; overflow-wrap:anywhere }
.nm-botoes{ display:flex; flex-wrap:wrap; gap:5px }
.nm-botoes .btn{ white-space:nowrap; padding:0 10px; height:30px; box-sizing:border-box; justify-content:center }
.nm-situacao .cel-sub{ margin-top:0 }
.nm-botoes.coluna{ flex-direction:column; align-items:stretch }
.nm-botoes.coluna .btn{ justify-content:center }

@media (min-width:821px){
  #nm-lista .tabela-wrap{ overflow-x:hidden }
  #nm-lista table.dados{ width:100%; table-layout:fixed }
  #nm-lista table.dados th,#nm-lista table.dados td{ padding-left:10px; padding-right:10px; overflow-wrap:break-word }
  #nm-lista table.dados th,#nm-lista table.dados td{ padding-top:10px; padding-bottom:10px }
  #nm-lista th.nm-codigo{ width:12% }
  #nm-lista th.nm-titulo{ width:28% }
  #nm-lista th.nm-orgao{ width:7% }
  #nm-lista th.nm-assunto{ width:12% }
  #nm-lista th.nm-sit{ width:12% }
  #nm-lista th.nm-obs{ width:12% }
  #nm-lista th.nm-pdf{ width:10% }
  #nm-lista th.acoes-col{ width:7% }
  /* Os botoes de cada coluna tem a mesma largura, um embaixo do outro pela tabela inteira. */
  #nm-lista td.nm-obs .nm-botoes .btn,#nm-lista td.nm-pdf .nm-botoes:not(.par) .btn{ width:100%; max-width:150px }
  #nm-lista td.acoes-col .nm-botoes .btn{ width:100% }
  /* Abrir, Baixar, Trocar e Tirar em duas colunas, para a linha nao crescer quatro botoes de altura. */
  .nm-botoes.par{ display:grid; grid-template-columns:1fr 1fr }
  .nm-botoes.par .btn{ padding-left:4px; padding-right:4px }
}

/* ---- o detalhe da norma (janela) -------------------------------------- */
.nm-detalhe dd{ overflow-wrap:anywhere }
.nm-detalhe .inteiro dd{ white-space:pre-line }

/* ---- celular: cada linha vira cartao (a casca faz isso); aqui so o ajuste -- */
@media (max-width:820px){
  .filtros.nm-filtros{ grid-template-columns:1fr }
  .filtros .nm-filtro{ flex:1 1 100% }
  .filtros .nm-filtro select{ width:100% }
  #nm-lista table.resp td{ overflow-wrap:anywhere }
  /* O valor de cada linha do cartao: uma coluna so, encostada a direita. */
  .nm-cel{ min-width:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right }
  .nm-situacao{ align-items:flex-end }
  .nm-selos,.nm-botoes{ justify-content:flex-end; margin-top:0 }
  .nm-obs-texto{ margin:0 }
  .nm-botoes.coluna{ flex-direction:row }
  .nm-aplicacao{ display:none }
}

@media print{
  .nm-aviso,.nm-botoes{ display:none !important }
  .nm-obs-texto,.nm-aplicacao{ display:block; -webkit-line-clamp:unset; line-clamp:unset }
}