/* GERADO por scripts/gerar_tema_ind.ps1 a partir de StyleNewPage/assets/css/theme.css - nao editar */
/*!
 * Theme Name: Default
 * Package : DashLite
 * Author: ControlQ
 * Author URI: http://themeforest.net/user/softnio
 * Version	 :	1.0.0
 * Updated	 :	07.23.2020
**/

/* ─── Fix: modal do Bootstrap "inchava" a grid/DataTables ─────────────────────
   Ao abrir um modal, o Bootstrap 5 remove a barra de rolagem do body (overflow:hidden)
   e adiciona padding-right pra compensar. Neste layout (sidebar fixa) a barra sai mas a
   compensação não bate, alargando o conteúdo → o DataTables (width:100%) estica e a coluna
   de Ações corta. Solução: manter a barra do body SEMPRE visível (incondicional), assim o
   Bootstrap não tem o que remover; e zerar o padding-right que ele injeta. */
body { overflow-y: scroll !important; }
body.modal-open { padding-right: 0 !important; overflow-y: scroll !important; }
.modal { padding-right: 0 !important; }
/* ─────────────────────────────────────────────────────────────────────────── */

/* ─── DataTables — Campo de busca ─────────────────────────────────────────── */

/* Primeira linha gerada pelo DataTables (search + length):
   garante padding mesmo quando o card-pai tem p-0 */
div.dataTables_wrapper > div.row:first-child {
    padding: 0.6rem 0.5rem !important;
    border-bottom: 1px solid #e7ebf0;
    margin: 0 !important;
    background: #fff;
}

/* Área do filtro */
div.dataTables_wrapper div.dataTables_filter {
    padding: 0.25rem 0.5rem !important;
}

/* Label — alinha e remove margem extra */
div.dataTables_wrapper div.dataTables_filter label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
}

/* Input de busca — largo, com lupa e borda elegante */
div.dataTables_wrapper div.dataTables_filter input {
    width: 300px !important;
    height: 40px !important;
    padding: 0.45rem 0.9rem 0.45rem 2.3rem !important;
    font-size: 0.85rem;
    border: 1.5px solid #dde2ec !important;
    border-radius: 8px !important;
    background: #f8faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238094ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 0.7rem center !important;
    background-size: 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none !important;
    box-shadow: none !important;
    color: #364a63;
    margin-left: 0 !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #B91C1C !important;
    box-shadow: 0 0 0 3px rgba(45, 122, 45, 0.1) !important;
    background-color: #fff !important;
}

div.dataTables_wrapper div.dataTables_filter input::placeholder {
    color: #b0bec5;
}

/* Número de registros (show X entries) */
div.dataTables_wrapper div.dataTables_length {
    padding: 0.25rem 0.5rem !important;
}

div.dataTables_wrapper div.dataTables_length label {
    font-size: 0.82rem;
    color: #8094ae;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

div.dataTables_wrapper div.dataTables_length select {
    height: 36px;
    border: 1.5px solid #dde2ec;
    border-radius: 6px;
    padding: 0 0.5rem;
    font-size: 0.82rem;
    color: #364a63;
    background: #f8faff;
}

/* Info e paginação — espaço inferior */
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
    padding: 0.6rem 1rem !important;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ─── Tabelas no celular: cabecalho preso em flexbox por outro componente do tema ────
   O dashlite.css tem uma regra propria de OUTRO componente (lista de transacoes "tb-tnx")
   que, abaixo de 767px, transforma qualquer elemento com a classe "tb-tnx-head" em
   flexbox (thead/tr virando display:flex, th virando display:block). Essa classe e
   reaproveitada no cabecalho de varias grids do sistema so pelo visual (cor, negrito,
   maiusculo) - sem intencao de virar flexbox. Isso desalinhava completamente o
   cabecalho do corpo da tabela no celular (nenhuma largura de coluna tinha efeito nele,
   so o corpo, que continuava em table normal). Aplicado globalmente (table.dataTable,
   classe que o proprio DataTables adiciona em toda tabela inicializada por ele) para
   cobrir qualquer tela do sistema, atual ou futura, sem precisar repetir por arquivo. */
@media (max-width: 767px) {
    table.dataTable thead tr.tb-tnx-head,
    table.dataTable thead.tb-tnx-head tr { display: table-row !important; width: auto !important; }
    table.dataTable thead.tb-tnx-head { display: table-header-group !important; }
    table.dataTable thead tr.tb-tnx-head th,
    table.dataTable thead.tb-tnx-head th { display: table-cell !important; }

    /* Fallback generico de legibilidade pras telas que ainda nao tiveram um ajuste fino
       proprio de largura por coluna: menos padding e cabecalho podendo quebrar linha em
       vez do nowrap+ellipsis do desktop. Onde uma tela ja tem sua propria regra por ID
       (ex: #gvDataTable), essa regra mais especifica continua vencendo por especificidade
       do CSS, entao isso nao regride o que ja foi ajustado individualmente. */
    table.dataTable th, table.dataTable td { padding: 6px 6px !important; }
    table.dataTable thead th {
        white-space: normal !important; overflow: visible !important;
        text-overflow: clip !important; word-wrap: break-word !important;
    }
    table.dataTable tbody td { white-space: normal !important; word-wrap: break-word !important; }
}
/* ─────────────────────────────────────────────────────────────────────────── */