/* ══════════════════════════════════════════
   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; }
}