/* Abas (.tabs-nav/.tab-btn/.tab-pane) agora vivem em components.css — compartilhadas com Configurações. */

/* Espaço antes/depois da barra de filtros reduzido em 90% (2026-07-13, pedido do usuário) —
   só na aba "Log de Auditoria" (`.audit-log-filters`, classe extra além de `.audit-filters`
   base). `.audit-filters` é compartilhada com a aba "Uso do Sistema" (mesmo módulo) e com o
   Dashboard (via `.dash-filters`) — mesmo critério já usado lá, nunca mexer na classe
   compartilhada direto. 2px×0.1=0.2px (topo), 16px×0.1=1.6px (baixo, era var(--space-md)). */
.audit-filters.audit-log-filters {
    padding: 0.2px 0 1.6px;
}

/* Espaço entre a barra de abas e o conteúdo abaixo reduzido em 80% (2026-07-13) — mesmo
   ajuste e mesma conta já aplicados em Configurações (16px → 3.2px), pedido explícito do
   usuário pra replicar aqui também. `.tabs-nav.auditoria-tabs-nav` (2 classes) por cima da
   `.tabs-nav` compartilhada com Configurações — não depende de ordem de `<link>` pra ganhar. */
.tabs-nav.auditoria-tabs-nav {
    margin-bottom: 3.2px;
}

/* "Mais Filtros" (2026-07-13) — De/Até/Ação/Tabela colapsados num dropdown, só Filial/
   Usuário continuam sempre visíveis na barra (pedido do usuário: muito filtro numa linha só
   quebrava em telas menores). Mesmo padrão visual/interação do dropdown de notificações
   (.notif-dropdown, layout.css) — position:relative no wrap, dropdown absoluto ancorado nele. */
.mais-filtros-wrap {
    position: relative;
}

.mais-filtros-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 8px;
    background: var(--c-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.mais-filtros-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md);
    z-index: 500;
    flex-direction: column;
    gap: var(--space-sm);
}
.mais-filtros-dropdown.open { display: flex; }

/* Dentro do dropdown os campos ficam empilhados (label + input/select numa linha só, mas o
   controle ocupa a largura toda) — diferente do `.audit-filters label` original, que é
   pensado pra ficar lado a lado na barra horizontal. */
.mais-filtros-dropdown label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-text-secondary);
}
.mais-filtros-dropdown input,
.mais-filtros-dropdown select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    background-color: var(--c-surface);
    color: var(--c-text-primary);
}

/* Painel branco por trás da tabela — sem isso ela fica sobre o cinza do fundo da página */
.audit-log-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    /* Topo reduzido em 70% (2026-07-13) — mesmo ajuste/mesma conta já feitos em Pedidos/
       Clientes/Notificações/Usuários entre o header do módulo e a barra do DataTable
       (.dt-toolbar, length+busca). Esta aba não tem .panel-header (o "topo" aqui é a própria
       borda de cima de .audit-log-panel, logo acima da tabela) — só essa classe não é
       compartilhada com mais nada (só usada na aba "Log de Auditoria"), então dá pra
       sobrescrever direto, sem precisar de classe extra pra escopar. 16px × 0.3 = 4.8px. */
    padding-top: 4.8px;
    overflow: hidden;
}

/* ---------- Filtros (.audit-filters promovida pra components.css — Dashboard reusa) ---------- */

/* ---------- Badges de ação de LOGIN — só faz sentido aqui, o histórico de Pedido não tem isso.
   Badges de CRIACAO/ALTERACAO/EXCLUSAO (.badge-acao base + as 3 variantes) moraram aqui antes
   de serem promovidas pra components.css quando o histórico do Pedido passou a usá-las também. */
.badge-acao-login     { background-color: var(--c-success-light); color: var(--c-success); }
.badge-acao-loginfalha{ background-color: var(--c-warning-light); color: var(--c-warning); }

/* ---------- Diff de detalhe ---------- */
.audit-detalhe-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--c-border);
    font-size: 0.88rem;
    color: var(--c-text-primary);
}

.audit-detalhe-meta strong {
    color: var(--c-text-secondary);
}

.audit-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.audit-diff-table th {
    text-align: left;
    padding: 6px 8px;
    background-color: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-border);
    font-weight: 600;
    color: var(--c-text-secondary);
}

.audit-diff-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
    color: var(--c-text-primary);
}

.audit-val-old {
    color: var(--c-danger);
    text-decoration: line-through;
    display: block;
}

.audit-val-new {
    color: var(--c-success);
    display: block;
}

/* Classes .uso-* (KPI cards + chart cards + tabela + área de scroll) promovidas pra
   components.css: mesmo visual reaproveitado pelo Dashboard (ver claude.md). */