/* Tela de auditoria — complementa reports-index.css */

.hidden { display: none !important; }
.muted { color: var(--muted, #8b95a5); }

/* Faixa de integridade */
.integridade {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin: 16px 0;
  border: 1px solid var(--border, #2a3240); border-radius: 10px;
  background: var(--panel2, #171d27);
}
.integridade .ico { font-size: 20px; line-height: 1; }
.integridade .txt { flex: 1; min-width: 0; }
.integridade .txt strong { display: block; font-size: 14px; }
.integridade .txt .muted { font-size: 12px; margin-top: 2px; }
.integridade.ok { border-color: #2c6e49; background: rgba(44, 110, 73, .12); }
.integridade.ok .ico::before { content: "🛡️"; }
.integridade.alerta { border-color: #a33; background: rgba(170, 51, 51, .12); }
.integridade.alerta .ico::before { content: "⚠️"; }
.integridade.carregando .ico::before { content: "⏳"; }
.integridade .ico { font-size: 0; }
.integridade .ico::before { font-size: 20px; }

/* Filtros */
.filtros { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.filtros .linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros input[type="search"] { flex: 1; min-width: 240px; }
.filtros input, .filtros select, .filtros button, .filtros .btn-link {
  font: inherit; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border, #2a3240);
  background: var(--panel2, #171d27); color: var(--fg, #e6e9ef);
}
.filtros label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted, #8b95a5); }
.filtros button, .filtros .btn-link { cursor: pointer; text-decoration: none; }
.filtros button:hover, .filtros .btn-link:hover { filter: brightness(1.18); }

.resumo { font-size: 12px; margin-bottom: 8px; }

/* Tabela */
.tabela-audit { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-audit thead th {
  text-align: left; padding: 10px 12px; font-weight: 600; font-size: 12px;
  color: var(--muted, #8b95a5); border-bottom: 1px solid var(--border, #2a3240);
  position: sticky; top: 0; background: var(--bg, #0f141b); z-index: 1;
}
.tabela-audit tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.tabela-audit tbody tr:hover { background: rgba(255,255,255,.03); }
.tabela-audit tr.falha { background: rgba(170, 51, 51, .06); }

.c-data { white-space: nowrap; width: 1%; color: var(--muted, #8b95a5); }
.c-user { white-space: nowrap; width: 1%; font-weight: 600; }
.c-acao { white-space: nowrap; width: 1%; }
.c-alvo { word-break: break-word; }
.c-alvo .det { font-size: 11px; margin-top: 3px; }
.c-res, .c-ip { white-space: nowrap; width: 1%; }

.ok { color: #4ea87b; }
.nok { color: #e06c6c; font-weight: 600; }
.tag-sistema {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  background: rgba(122, 130, 255, .18); color: #a3a9ff; font-weight: 600;
}

.vazio { padding: 28px; text-align: center; color: var(--muted, #8b95a5); }

@media (max-width: 720px) {
  .tabela-audit .c-ip, .tabela-audit thead .c-ip { display: none; }
  .filtros input[type="search"] { min-width: 100%; }
}

/* Ícone nativo do seletor de data: o navegador o desenha escuro por padrão, o que o faz
   sumir no tema escuro. `invert` deixa branco, garantindo o contraste. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .75;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }