/* Monitoramento de acessos. Usa os tokens e os cartoes do dashboard (.gv); aqui
   fica so o que e proprio desta tela. */

.mon .mon-bloco { display: grid; gap: 20px; min-width: 0; }

/* Numeros alinhados a direita, para comparar de cima a baixo. */
.mon .mon-numero { text-align: right; white-space: nowrap; }
.mon th.mon-numero { text-align: right; }
.mon .mon-apagado { color: var(--gv-apagado); }

/* IP em monoespacada: sao numeros que se comparam digito a digito. */
.mon-ip { font: 500 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; white-space: nowrap; }

.mon .mon-duas-linhas { display: grid; gap: 1px; min-width: 0; }
.mon .mon-duas-linhas strong { font: 600 14px/20px "Inter", sans-serif; color: var(--gv-forte); white-space: nowrap; }
.mon .mon-duas-linhas small { font-size: 12px; line-height: 16px; color: var(--gv-apagado); white-space: nowrap; }

.mon .gv-tabela td { vertical-align: middle; }
/* Nome de usuario comprido nao empurra as outras colunas para fora. */
.mon .gv-tabela .pessoa-celula > div { min-width: 0; max-width: 190px; }
.mon .gv-tabela th, .mon .gv-tabela td { padding-left: 10px; padding-right: 10px; }
.mon .gv-tabela .pessoa-celula strong { white-space: nowrap; }
.mon .gv-tabela .pessoa-celula small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon .gv-tabela td { white-space: nowrap; }
.mon .mon-rolagem { overflow-x: auto; }
.mon .mon-rolagem.alta { max-height: 640px; }
.mon .gv-tabela tbody tr.linha-clicavel:hover { background: var(--gv-caixa); }

/* Ponto pulsando ao lado de "Ativo agora". */
.mon .gv-selo { gap: 6px; white-space: nowrap; }
.mon .mon-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mon-pulso 1.6s ease-in-out infinite; }
@keyframes mon-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.mon .mon-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.mon .mon-filtros .busca { flex: 1 1 280px; min-width: 0; }
.mon .mon-filtros select { width: auto; min-width: 170px; }

.mon .mon-paginacao { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.mon .mon-paginacao .espaco { flex: 1; }

.mon .gv-topo button.pequeno { min-height: 36px; }

.mon .mon-nota { margin: 0; font-size: 12px; line-height: 18px; color: var(--gv-apagado); }

/* Ficha de um acesso (janela). */
.mon-ficha { display: grid; gap: 0; }
.mon-ficha-linha { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); align-items: baseline; }
.mon-ficha-linha:first-child { border-top: 0; }
.mon-ficha-linha > span { font-size: 13px; color: var(--t2); }
.mon-ficha-linha > strong { font: 600 14px/20px "Inter", sans-serif; color: var(--t1); min-width: 0; overflow-wrap: anywhere; }
.mon-ficha-linha code { font-size: 12px; line-height: 17px; }
.modal .rodape-modal a.botao { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 700px) {
  .mon-ficha-linha { grid-template-columns: 1fr; gap: 2px; }
}