/* ══════════════════════════════════════════
   DATATABLES — layout fixo em 3 regiões (ver claude.md > DataTables)
   Portado do padrão validado em fazendaipe (módulos Rebanho/Reprodução).
══════════════════════════════════════════ */

/* Elo da cadeia flex: table-container precisa propagar a altura para o wrapper */
.table-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Wrapper é flex column: toolbar no topo, scroll cresce, footer fica no final */
.dataTables_wrapper {
    font-size: 0.9rem;
    color: var(--c-text-primary);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Seção de scroll cresce para preencher todo o espaço entre toolbar e footer */
.dataTables_scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.dataTables_scrollHead { flex-shrink: 0; }

/* Altura real é definida via JS (_recalcScrollBodyH em app.js) — o valor aqui é só fallback */
div.dataTables_scrollBody {
    max-height: none !important;
    overflow-y: auto !important;
}

/* Toolbar: length + filter lado a lado, via dom customizado "<'dt-toolbar'lf>" */
.dt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin-bottom: var(--space-sm);
}

/* Footer: info à esquerda, paginador à direita */
.dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-top: var(--space-xs);
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Sem isso, o campo "Pesquisar" usa o anel de foco nativo do navegador, que não reserva
   espaço no layout e acaba encostando/sobrepondo o que vem logo abaixo (cabeçalho da
   tabela). Mesmo estilo de foco já usado em .form-group input, pra ficar consistente. */
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 0.2rem var(--c-accent-light);
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ── Tabela ── */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table.dataTable thead th {
    background-color: var(--c-surface-alt);
    color: var(--c-text-primary);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 6px 10px;
    border-bottom: 2px solid var(--c-border);
    text-align: left;
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

table.dataTable tbody tr:nth-child(even) {
    background-color: var(--c-surface-alt);
}

table.dataTable tbody tr:hover td {
    background-color: var(--c-accent-light);
    cursor: pointer;
}

.dt-center { text-align: center; }

/* ── Info + Paginação ── */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: 0.82rem;
    color: var(--c-text-secondary);
    padding-top: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    margin: 0 2px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text-secondary) !important;
    background: var(--c-surface);
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-surface-alt) !important;
    border-color: var(--c-border-strong) !important;
    color: var(--c-text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Compactação para telas menores (padrão herdado da v1) */
@media (max-width: 1400px) {
    table.dataTable { font-size: 0.82rem; }
    table.dataTable thead th { padding: 5px 8px; font-size: 0.78rem; }
    table.dataTable tbody td { padding: 4px 8px; }
    .dt-toolbar { margin-bottom: var(--space-xs); }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { font-size: 0.75rem; }
}

@media (max-width: 1100px) {
    table.dataTable { font-size: 0.76rem; }
    table.dataTable thead th { padding: 4px 6px; font-size: 0.72rem; }
    table.dataTable tbody td { padding: 3px 6px; }
}

/* Compactação vertical pra telas baixas (1366x768 e afins, 2026-07-15) — independente da
   largura: reduz o que ocupa altura de cada linha, pra caber mais linhas visíveis sem
   precisar rolar tanto. Vale pra qualquer DataTable do sistema (Pedidos, Auditoria, etc.),
   mesmo limiar já usado no formulário de Pedido. */
@media (max-height: 800px) {
    table.dataTable thead th { padding: 4px 10px; }
    table.dataTable tbody td { padding: 3px 10px; }
    .dt-toolbar { margin-bottom: 4px; }
}