/* ============================================================================
 * datatable-compact.css
 * Layout compacto "estilo Excel" para as tabelas do simple-datatables.
 * Carregado DEPOIS de simple-datatables.css e style.css (ver core/head.php),
 * então vence no empate de especificidade.  É AQUI que se ajusta o visual das
 * tabelas — não editar js/simple-datatables.css (é a lib e some num update).
 *
 * Escopo: só o que estiver dentro de .datatable-wrapper (todo <table> que passa
 * pelo initDataTable ganha as classes .datatable-wrapper / .datatable-table).
 * ==========================================================================*/

/* ---- variáveis locais (mude aqui para calibrar) ---- */
.datatable-wrapper {
    --dt-border: #c9c9c9;
    --dt-head-bg: #d9dfe6;
    /* #eef0f2;*/
    --dt-row-hover: #fff7e6;
    --dt-cell-pad-y: 1px;
    --dt-cell-pad-x: 3px;
    --dt-font: 14px;
    --dt-line: 1.2;
    /* altura máxima da área de rolagem da tabela: vira caixa própria com
       cabeçalho congelado. Ajuste (ou zere com "none") conforme o layout. */
    /*   --dt-max-height: calc(100vh - 170px);*/

    width: 100%;
    /*   overflow: visible;*/
    /* a rolagem fica no .datatable-container abaixo */
    /*  border: 1px solid var(--dt-border);*/
    background: #fff;
}

/* a área que efetivamente rola (barras de busca/paginação ficam fixas fora dela) */
.datatable-wrapper .datatable-container {
    max-height: var(--dt-max-height);
    overflow: auto;
    /* rola horizontal E vertical; <thead> congela */
}

/* ---- a tabela em si ----
 * border-collapse: separate (não collapse!) — é o único jeito das linhas de
 * grade não sumirem quando o <thead> fica "sticky" no Chrome. As linhas são
 * desenhadas só à direita/abaixo de cada célula; a moldura externa é a borda
 * do .datatable-wrapper. */
.datatable-wrapper .datatable-table {
    border-collapse: collapse !important;
    width: auto;
    font-size: var(--dt-font);
    line-height: var(--dt-line);
    color: var(--cor-texto-esc, #333);
    background: #fff;
}

/* célula: padding curto + linha de grade 1px (direita + baixo) */
.datatable-wrapper .datatable-table>thead>tr>th,
.datatable-wrapper .datatable-table>thead>tr>td,
.datatable-wrapper .datatable-table>tbody>tr>th,
.datatable-wrapper .datatable-table>tbody>tr>td,
.datatable-wrapper .datatable-table>tfoot>tr>th,
.datatable-wrapper .datatable-table>tfoot>tr>td {
    padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x);
    margin: 0;
    border: 0;
    height: auto;
    /*  border-right: 1px solid var(--dt-border);
    border-bottom: 1px solid var(--dt-border);*/
    vertical-align: middle;
    white-space: nowrap;
    /* Excel não quebra linha por padrão */
    font-size: var(--dt-font);
    line-height: var(--dt-line);
    text-align: left;
}

.datatable-wrapper .datatable-table>tbody>tr>th,
.datatable-wrapper .datatable-table>tbody>tr>td {
    height: 30px;
}

/* cabeçalho: fundo cinza, negrito, fixo no topo ao rolar */
.datatable-wrapper .datatable-table>thead>tr>th {
    background: var(--dt-head-bg);
    font-weight: 700;
    text-align: center;
    font-size: 12px !important;
    position: sticky;
    top: 0;
    z-index: 3;
    /*  border-bottom: 1px solid #9a9a9a;*/
    text-shadow: none;
    box-shadow: none;
    padding: 6px 3px;
}

.datatable-wrapper .datatable-table>tfoot>tr>th {
    background: var(--dt-head-bg);
    font-weight: 700;
    text-align: center;
    font-size: 12px !important;
    position: sticky;
    top: 0;
    z-index: 3;
    /*  border-bottom: 1px solid #9a9a9a;*/
    text-shadow: none;
    box-shadow: none;
    padding: 6px 3px;
}

/* a(s) linha(s) extra do thead (barra "aplicar a todos" reinserida pelo helper).
   Não fica sticky para não brigar com a linha de <th>; rola junto com o corpo. */
.datatable-wrapper .datatable-table>thead>tr:not(:last-child)>td,
.datatable-wrapper .datatable-table>thead>tr.extra-info>td {
    background: #f6f7f8;
    text-align: center;
}

/* zebra + hover (hover ganha) */
.datatable-wrapper .datatable-table>tbody>tr:nth-child(even)>td {
    background: #f7f7f7;
}

.datatable-wrapper .datatable-table>tbody>tr:hover>td {
    background: var(--dt-row-hover);
}

/* rodapé (subtotais) em destaque leve */
.datatable-wrapper .datatable-table>tfoot>tr>td,
.datatable-wrapper .datatable-table>tfoot>tr>th {
    background: var(--dt-head-bg);
    font-weight: 700;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

/* centralização opcional (opts.center do initDataTable) */
/* 
   .dt-center-all .datatable-table>tbody>tr>td,
.dt-center-all .datatable-table>thead>tr>th {
text-align: center;

}
*/


/* ---- inputs / selects dentro das células: somem na célula ---- */
/*
.datatable-wrapper .datatable-table td input,
.datatable-wrapper .datatable-table td select,
.datatable-wrapper .datatable-table td textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 34px;
    height: 100%;
    margin: 0;
    padding: 0 2px;
     border: 1px solid transparent; 
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: var(--dt-font);
    line-height: var(--dt-line);
    color: inherit;
    text-align: right;
}
    */
.datatable-wrapper .datatable-table input,
.datatable-wrapper .datatable-table select {
    border: none;
    background: transparent;
    width: 100%;
    min-width: 50px;
    height: 100%;
    box-sizing: border-box;
    text-align: right;
    /* faz o input respeitar o tamanho da célula */

}

.datatable-wrapper .datatable-table td input[type="number"] {
    text-align: right;
}

.datatable-wrapper .datatable-table td input[type="checkbox"],
.datatable-wrapper .datatable-table td input[type="radio"] {
    width: auto;
    min-width: 0;
    vertical-align: middle;
}

.datatable-wrapper .datatable-table td select {
    text-align: left;
    padding-right: 0;
}

/* edição: destaca a célula ativa */
.datatable-wrapper .datatable-table td input:focus,
.datatable-wrapper .datatable-table td select:focus,
.datatable-wrapper .datatable-table td textarea:focus {
    border-color: var(--cor-bt1, #4a90e2);
    background: #fff;
    outline: none;
}

.datatable-wrapper .datatable-table td .inputDestaq {
    background: var(--cor-bt1, #4a90e2) !important;
    color: #fff;
    font-weight: 700;
}

/* botões "aplicar coluna" (caret) menores */
.datatable-wrapper .datatable-table .bt_aplicar {
    font-size: 13px !important;
    line-height: 1;
    cursor: pointer;
}

/* ---- botão de ordenação: sem borda/sombra/contorno do <button> ----
 * (o <button class="datatable-sorter"> ganhava a borda/relevo padrão do
 * navegador e o anel de foco depois do clique — é a "sombra" ao redor do
 * texto e das setas) */
.datatable-wrapper .datatable-table th button,
.datatable-wrapper .datatable-table th .datatable-sorter,
.datatable-wrapper .datatable-table th .datatable-filter {
    margin: 0;
    padding: 0 12px 0 0;
    /* só a folga p/ a seta à direita */
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    width: 100%;
    text-align: inherit;
    cursor: pointer;
}

.datatable-wrapper .datatable-table th button:focus,
.datatable-wrapper .datatable-table th button:focus-visible,
.datatable-wrapper .datatable-table th button:active,
.datatable-wrapper .datatable-table th button:-moz-focusring {
    outline: none;
    box-shadow: none;
}

/* remove a borda pontilhada interna do Firefox */
.datatable-wrapper .datatable-table th button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* ---- setas de ordenação: discretas ---- */
.datatable-wrapper .datatable-sorter::before,
.datatable-wrapper .datatable-sorter::after {
    right: 2px;
    border-left-width: 3px;
    border-right-width: 3px;
}

.datatable-wrapper .datatable-sorter::before {
    border-top-width: 3px;
}

.datatable-wrapper .datatable-sorter::after {
    border-bottom-width: 3px;
}

/* ---- barra superior/inferior (busca, "N por página", info, paginação) ---- */
.datatable-top,
.datatable-bottom {
    padding: 3px 4px;
    font-size: var(--fs-xxs, 11px);
    background: #f4f5f6;
    border-bottom: 1px solid var(--dt-border);
}

.datatable-bottom {
    border-bottom: 0;
    border-top: 1px solid var(--dt-border);
}

.datatable-selector,
.datatable-input {
    padding: 1px 4px;
    font-size: var(--fs-xxs, 11px);
    border: 1px solid var(--dt-border);
    border-radius: 3px;
    height: auto;
    line-height: 1.4;
}

.datatable-input {
    min-width: 160px;
}

.datatable-info {
    margin: 2px 0;
    opacity: .8;
}

.datatable-pagination a,
.datatable-pagination button {
    margin-left: 2px;
    padding: 1px 6px;
    min-width: 20px;
    font-size: var(--fs-xxs, 11px);
    line-height: 1.5;
    border: 1px solid var(--dt-border);
    border-radius: 3px;
    background: #fff;
}

.datatable-pagination a:hover,
.datatable-pagination button:hover {
    background: var(--dt-head-bg);
}

.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active button {
    background: var(--cor-bt1, #4a90e2);
    border-color: var(--cor-bt1, #4a90e2);
    color: #fff;
}

/* cursor de navegação por teclado da lib */
.datatable-wrapper .datatable-table:focus {
    outline: none;
}

.datatable-wrapper .datatable-table tr.datatable-cursor>td:first-child {
    box-shadow: inset 3px 0 0 var(--cor-bt1, #4a90e2);
}