/*
|--------------------------------------------------------------------------
| Tabela administrativa (data grid)
|--------------------------------------------------------------------------
|
| Estrutura padrão de uma listagem:
|
|   <section class="ds-panel">
|     <div class="ds-toolbar">         filtros rápidos | busca, Filtros, Exportar
|     <div class="ds-active-filters">  chips dos filtros aplicados (se houver)
|     <div class="ds-table-wrap">
|       <table class="ds-table">       cabeçalho + linhas
|     <div class="ds-table-footer">    total | por página | paginação
|   </section>
|
| Alinhamento:
|   texto à esquerda · número/moeda à direita (.ds-cell-num) ·
|   data com dígitos tabulares (.ds-cell-date) · ações à direita (.ds-cell-actions)
|
| Cabeçalho em frase normal (nada de CAIXA ALTA).
| Linha inteira não é clicável: o título da linha é o link.
|
*/

.ds-table-wrap {
    width: 100%;

    overflow-x: auto;
}

.ds-table {
    width: 100%;
    margin: 0;

    border-collapse: separate;
    border-spacing: 0;

    font: var(--ds-text-body-sm);
    font-variant-numeric: tabular-nums;
}

.ds-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;

    padding: 8px var(--ds-table-cell-px);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);

    background: var(--ds-color-surface-subtle);

    color: var(--ds-color-text-secondary);

    font: 600 12px/16px var(--ds-font);
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    vertical-align: bottom;
}

.ds-table > tbody > tr > td {
    padding: var(--ds-table-cell-py) var(--ds-table-cell-px);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border-subtle);

    background: var(--ds-color-surface);

    color: var(--ds-color-text);

    vertical-align: middle;
}

.ds-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.ds-table > tbody > tr:hover > td {
    background: var(--ds-color-surface-hover);
}

/* Selecionada (checkbox marcado ou item ativo) */
.ds-table > tbody > tr.is-selected > td,
.ds-table > tbody > tr[aria-selected="true"] > td {
    background: var(--ds-color-surface-selected);
}

/* Zebra: só para tabelas largas de leitura linha a linha (relatórios) */
.ds-table--zebra > tbody > tr:nth-child(even) > td {
    background: var(--ds-color-surface-subtle);
}

/* Colunas especiais */

.ds-table .ds-cell-num {
    text-align: right;
    white-space: nowrap;
}

.ds-table .ds-cell-date {
    white-space: nowrap;
}

/* Coluna de marcação (checkbox) */
.ds-table .ds-cell-check {
    width: 44px;
    padding-right: 0;
}

.ds-table .ds-cell-check .ds-check {
    margin: 0;
}

.ds-table .ds-cell-actions {
    width: 1%;

    text-align: right;
    white-space: nowrap;
}

.ds-table .ds-cell-select {
    width: 1%;
    padding-right: 0;
}

.ds-table .ds-cell-nowrap {
    white-space: nowrap;
}

/* Primeira coluna fixa ao rolar na horizontal */
.ds-table--sticky-first > thead > tr > th:first-child,
.ds-table--sticky-first > tbody > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;

    box-shadow: inset -1px 0 0 var(--ds-color-border-subtle);
}

/* Conteúdo de célula: título + linha de apoio */
.ds-cell-main {
    display: block;

    color: var(--ds-color-text);

    font-weight: var(--ds-font-weight-medium);
}

.ds .ds-cell-main:is(a) {
    color: var(--ds-color-text);
}

.ds .ds-cell-main:is(a):hover {
    color: var(--ds-color-text-link);
}

.ds-cell-sub {
    display: block;

    color: var(--ds-color-text-muted);

    font: var(--ds-text-caption);
}

.ds-cell-empty {
    color: var(--ds-color-text-disabled);
}

/* Ações por linha: ícones discretos, aparecem inteiros no hover */
.ds-row-actions {
    display: inline-flex;
    gap: 2px;
}

/* Estados da tabela (linha única ocupando todas as colunas) */
.ds-table-state {
    padding: var(--ds-space-10) var(--ds-space-4) !important;

    color: var(--ds-color-text-secondary);

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Barra de ferramentas da listagem
|--------------------------------------------------------------------------
*/

.ds-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3) var(--ds-space-4);

    padding: var(--ds-space-3) var(--ds-space-4);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-toolbar__start,
.ds-toolbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-toolbar__end {
    margin-left: auto;
}

.ds-toolbar .ds-search {
    width: 280px;
}

/* Filtro com rótulo na toolbar (select, data): largura fixa, alinhado pela base */
.ds-toolbar:has(.ds-toolbar__campo) .ds-toolbar__start,
.ds-toolbar:has(.ds-toolbar__campo) .ds-toolbar__end {
    align-items: flex-end;
}

.ds-toolbar__campo {
    width: 220px;
}

.ds-toolbar__campo--sm {
    width: 120px;
}

@media (max-width: 575.98px) {
    .ds-toolbar__campo,
    .ds-toolbar__campo--sm {
        width: 100%;
    }
}

/* Ações em massa: substitui a toolbar quando há linhas selecionadas */
.ds-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-3);

    padding: var(--ds-space-2) var(--ds-space-4);

    border-bottom: var(--ds-border-width) solid var(--ds-color-primary-subtle-border);

    background: var(--ds-color-primary-subtle);

    color: var(--ds-color-primary-active);

    font: var(--ds-text-body-sm);
    font-weight: var(--ds-font-weight-medium);
}

.ds-bulkbar[hidden] {
    display: none;
}

/* Rodapé: total | por página | paginação */
.ds-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2) var(--ds-space-4);

    padding: var(--ds-space-2) var(--ds-space-4);

    border-top: var(--ds-border-width) solid var(--ds-color-border);

    color: var(--ds-color-text-muted);

    font: var(--ds-text-body-sm);
}

/*
|--------------------------------------------------------------------------
| Filtros
|--------------------------------------------------------------------------
|
| Onde ficam:
|   até 4 opções de um critério     → filtro rápido segmentado na toolbar
|   2–4 critérios simples           → campos na .ds-filterbar, acima da tabela
|   5+ critérios ou filtros raros   → botão "Filtros" com contador, abre drawer
| Sempre: chips dos filtros ativos + "Limpar filtros".
|
*/

.ds-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;

    padding: 3px;

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-lg);

    background: var(--ds-color-surface-subtle);
}

.ds-segmented__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: calc(var(--ds-control-height) - 8px);
    padding: 0 10px;

    border: 0;
    border-radius: var(--ds-radius-md);

    background: transparent;

    color: var(--ds-color-text-secondary);

    font: 500 13px/18px var(--ds-font);
    white-space: nowrap;

    cursor: pointer;
}

.ds-segmented__btn:hover {
    color: var(--ds-color-text);
}

.ds-segmented__btn[aria-pressed="true"],
.ds-segmented__btn[aria-selected="true"],
.btn-check:checked + .ds-segmented__btn {
    background: var(--ds-color-surface);

    color: var(--ds-color-text);

    box-shadow: 0 0 0 1px var(--ds-color-border), var(--ds-shadow-raised);
}

.ds-segmented__btn:focus-visible,
.btn-check:focus-visible + .ds-segmented__btn {
    outline: var(--ds-focus-outline);
    outline-offset: 0;
}

.ds-segmented__count {
    color: var(--ds-color-text-muted);

    font-weight: var(--ds-font-weight-regular);
    font-variant-numeric: tabular-nums;
}

.ds-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ds-space-3);

    padding: var(--ds-space-3) var(--ds-space-4);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);

    background: var(--ds-color-surface-subtle);
}

.ds-filterbar > .ds-field {
    width: 200px;
}

.ds-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-2);

    padding: var(--ds-space-2) var(--ds-space-4);

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-active-filters[hidden] {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Paginação (componente próprio e adaptação do DataTables)
|--------------------------------------------------------------------------
*/

.ds-pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.ds-pagination__btn,
.ds .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 30px;
    margin: 0 !important;
    padding: 0 8px !important;

    border: var(--ds-border-width) solid transparent !important;
    border-radius: var(--ds-radius-md) !important;

    background: transparent !important;

    color: var(--ds-color-text-secondary) !important;

    font: 500 13px/18px var(--ds-font);
    font-variant-numeric: tabular-nums;

    cursor: pointer;
}

.ds-pagination__btn:hover,
.ds .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: var(--ds-color-border) !important;

    background: var(--ds-color-surface-hover) !important;

    color: var(--ds-color-text) !important;
}

.ds-pagination__btn[aria-current="page"],
.ds .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.ds .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--ds-color-border-strong) !important;

    background: var(--ds-color-surface) !important;

    color: var(--ds-color-text) !important;
    font-weight: var(--ds-font-weight-semibold);
}

.ds-pagination__btn:disabled,
.ds .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.ds .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    border-color: transparent !important;

    background: transparent !important;

    color: var(--ds-color-text-disabled) !important;

    cursor: default;
}

/*
|--------------------------------------------------------------------------
| Adaptação do DataTables (só dentro de .ds)
|--------------------------------------------------------------------------
*/

.ds .dataTables_wrapper {
    width: 100%;
}

.ds .dataTables_wrapper .dataTables_info {
    padding: 0 !important;

    color: var(--ds-color-text-muted) !important;

    font: var(--ds-text-body-sm);
}

.ds .dataTables_wrapper .dataTables_paginate {
    padding: 0 !important;
}

.ds .dataTables_wrapper .dataTables_processing {
    top: 56px;

    height: auto;
    margin: 0;
    padding: var(--ds-space-2) var(--ds-space-3);

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-md);

    background: var(--ds-color-surface);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body-sm);

    box-shadow: var(--ds-shadow-floating);

    transform: translateX(-50%);
}

.ds .dataTables_wrapper .dataTables_processing > div:last-child {
    display: none;
}

/* Setas de ordenação discretas no lugar das imagens do DataTables */
.ds table.dataTable > thead > tr > th.sorting,
.ds table.dataTable > thead > tr > th.sorting_asc,
.ds table.dataTable > thead > tr > th.sorting_desc {
    padding-right: 26px !important;

    background-image: none !important;

    cursor: pointer;
}

.ds table.dataTable > thead > tr > th.sorting::before,
.ds table.dataTable > thead > tr > th.sorting::after,
.ds table.dataTable > thead > tr > th.sorting_asc::before,
.ds table.dataTable > thead > tr > th.sorting_asc::after,
.ds table.dataTable > thead > tr > th.sorting_desc::before,
.ds table.dataTable > thead > tr > th.sorting_desc::after {
    right: 10px !important;

    color: var(--ds-color-text-disabled);

    font-size: 9px !important;
    line-height: 9px;

    opacity: 1 !important;
}

.ds table.dataTable > thead > tr > th.sorting_asc::before,
.ds table.dataTable > thead > tr > th.sorting_desc::after {
    color: var(--ds-color-primary);
}

.ds table.dataTable.no-footer {
    border-bottom: 0;
}

.ds table.dataTable > tbody > tr > td.dataTables_empty {
    padding: var(--ds-space-10) var(--ds-space-4);

    color: var(--ds-color-text-secondary);

    text-align: center;
}

@media (max-width: 767.98px) {
    .ds-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ds-toolbar__end {
        margin-left: 0;
    }

    .ds-toolbar .ds-search {
        flex: 1 1 auto;

        width: auto;
    }

    .ds-filterbar > .ds-field {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Grade de lançamento (planilha): linhas = itens, colunas = períodos
|--------------------------------------------------------------------------
|
| Para digitar muitos valores de uma vez (índice × mês, meta × loja).
| Primeira coluna fixa ao rolar; células com campo compacto alinhado
| à direita; célula que não se aplica fica rebaixada com "—".
|
|   <div class="ds-table-wrap"><table class="ds-grade">
|     <thead><tr><th class="ds-grade__rotulo">Índice</th><th>jan</th>…</tr></thead>
|     <tbody>
|       <tr class="ds-grade__grupo"><th colspan="14">Financeiros</th></tr>
|       <tr><th class="ds-grade__rotulo" scope="row">Lucro</th>
|           <td><input class="ds-input ds-input--num" aria-label="Lucro, janeiro"></td>
|           <td class="ds-grade__na" aria-label="Não se aplica">—</td></tr>
|
*/

.ds-grade {
    min-width: 100%;
    margin: 0;

    border-collapse: separate;
    border-spacing: 0;

    font: var(--ds-text-body-sm);
    font-variant-numeric: tabular-nums;
}

.ds-grade th,
.ds-grade td {
    padding: 4px;

    border-bottom: var(--ds-border-width) solid var(--ds-color-border-subtle);

    vertical-align: middle;
}

.ds-grade > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;

    padding: 8px 4px;

    border-bottom-color: var(--ds-color-border);

    background: var(--ds-color-surface-subtle);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-label);
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
}

.ds-grade .ds-grade__rotulo {
    position: sticky;
    left: 0;
    z-index: 1;

    min-width: 180px;
    max-width: 240px;
    padding: 6px var(--ds-space-3);

    background: var(--ds-color-surface);

    color: var(--ds-color-text);

    font: var(--ds-text-body-sm);
    text-align: left;
}

.ds-grade > thead > tr > th.ds-grade__rotulo {
    z-index: 2;

    background: var(--ds-color-surface-subtle);

    font: var(--ds-text-label);
}

.ds-grade .ds-input {
    width: 84px;
    min-height: var(--ds-control-height-sm);
    padding: 4px 8px;

    font: var(--ds-text-body-sm);
    text-align: right;
}

.ds-grade__na {
    background: var(--ds-color-surface-sunken);

    color: var(--ds-color-text-disabled);

    text-align: center;
}

/* Coluna de totais/fechamento: separada das demais */
.ds-grade .ds-grade__total {
    border-left: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-grade__grupo > th {
    position: sticky;
    left: 0;

    padding: 10px var(--ds-space-3) 6px;

    background: var(--ds-color-surface);

    color: var(--ds-color-text-muted);

    font: 600 12px/16px var(--ds-font);
    text-align: left;
}

.ds-grade tbody tr:hover > td,
.ds-grade tbody tr:hover > .ds-grade__rotulo {
    background-color: var(--ds-color-surface-hover);
}

.ds-grade tbody tr:hover > .ds-grade__na {
    background-color: var(--ds-color-surface-sunken);
}

/* Grade com valores em reais (campos mais largos) */
.ds-grade--largo .ds-input {
    width: 150px;
}

.ds-grade--largo {
    width: auto;
    min-width: 0;
}

/*
| DataTables com o layout padrão (busca + "mostrar N" + info + paginação)
| dentro de um painel: telas que iniciam o DataTables direto, sem DS.dataTable.
*/
.ds .ds-panel .dataTables_wrapper > .dataTables_length,
.ds .ds-panel .dataTables_wrapper > .dataTables_filter {
    padding: var(--ds-space-3) var(--ds-space-5);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body-sm);
}

.ds .ds-panel .dataTables_wrapper > .dataTables_info,
.ds .ds-panel .dataTables_wrapper > .dataTables_paginate {
    padding: var(--ds-space-3) var(--ds-space-5) !important;
}

.ds .dataTables_wrapper > .dataTables_filter input,
.ds .dataTables_wrapper > .dataTables_length select {
    min-height: var(--ds-control-height-sm);
    margin-left: var(--ds-space-2);
    padding: 2px var(--ds-space-2);

    border: var(--ds-border-width) solid var(--ds-color-border-control, var(--ds-color-border));
    border-radius: var(--ds-radius-md);

    background: var(--ds-color-surface);
    color: var(--ds-color-text);

    font: var(--ds-text-body-sm);
}

.ds .dataTables_wrapper > .dataTables_filter input:focus-visible,
.ds .dataTables_wrapper > .dataTables_length select:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: 1px;
}

/* Ação da linha que precisa de POST (form com CSRF): o form não quebra o alinhamento */
.ds-row-actions__form {
    display: contents;
}

/* Edição rápida (vários campos editáveis por linha) */
.ds-edicao-rapida td {
    vertical-align: top;
}

.ds-edicao-rapida .ds-select {
    min-width: 180px;
}

.ds-edicao-rapida .select2-container {
    min-width: 220px;
}

.ds-edicao-rapida__pilha {
    display: grid;
    gap: var(--ds-space-1);
}

/* Linha que abre detalhes ao clicar */
.ds-table--clicavel tbody tr {
    cursor: pointer;
}

.ds-table--clicavel tbody tr:hover > td {
    background: var(--ds-color-surface-subtle);
}

/*
|--------------------------------------------------------------------------
| Funil de etapas (filtro com volume)
|--------------------------------------------------------------------------
| Etapas de um fluxo (processo seletivo, pedidos…) lado a lado, cada uma com
| a quantidade e uma barra proporcional ao volume. Clicar filtra a tabela
| (DS.dataTable: filtros = [data-ds-filtro], contagem em .ds-segmented__count).
|
| <div class="ds-funil" role="group" aria-label="Filtrar por etapa">
|   <button class="ds-funil__etapa" data-ds-filtro="todos" aria-pressed="true" style="--ds-volume: 100%">
|     <span class="ds-funil__nome">Todas</span><span class="ds-funil__qtd ds-segmented__count">343</span>
|   </button>
|   <button class="ds-funil__etapa ds-funil__etapa--final" …>…</button>   (etapa de encerramento, mais apagada)
| </div>
*/
.ds-funil {
    display: grid;
    grid-auto-columns: minmax(120px, 1fr);
    grid-auto-flow: column;

    overflow-x: auto;

    border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-funil__etapa {
    position: relative;

    display: grid;
    gap: var(--ds-space-1);
    align-content: start;

    padding: var(--ds-space-4) var(--ds-space-5) calc(var(--ds-space-4) + 6px);

    border: 0;
    border-left: var(--ds-border-width) solid var(--ds-color-border-subtle);

    background: transparent;
    color: var(--ds-color-text-secondary);

    text-align: left;

    cursor: pointer;
}

.ds-funil__etapa:first-child {
    border-left: 0;
}

/* Trilho e volume */
.ds-funil__etapa::before,
.ds-funil__etapa::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    height: 4px;
}

.ds-funil__etapa::before {
    right: 0;

    background: var(--ds-color-surface-sunken);
}

.ds-funil__etapa::after {
    width: var(--ds-volume, 0%);

    background: var(--ds-color-primary-subtle-border);

    transition: background var(--ds-duration-normal) ease;
}

.ds-funil__nome {
    overflow: hidden;

    font: var(--ds-text-body-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ds-funil__qtd {
    color: var(--ds-color-text);

    font: var(--ds-text-page-title);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ds-text-page-title-tracking);
}

.ds-funil__etapa:hover {
    background: var(--ds-color-surface-hover);
}

.ds-funil__etapa[aria-pressed="true"] {
    background: var(--ds-color-surface-selected);
    color: var(--ds-color-text);
}

.ds-funil__etapa[aria-pressed="true"]::after {
    background: var(--ds-color-primary);
}

.ds-funil__etapa[aria-pressed="true"] .ds-funil__qtd {
    color: var(--ds-color-primary);
}

.ds-funil__etapa--final .ds-funil__qtd {
    color: var(--ds-color-text-muted);
}

.ds-funil__etapa:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: -2px;
}

@media (max-width: 767.98px) {
    .ds-funil {
        grid-auto-columns: minmax(104px, 1fr);
    }

    .ds-funil__etapa {
        padding-inline: var(--ds-space-3);
    }
}

/* Valor principal da célula sem negrito (ex.: e-mail acima do telefone) */
.ds-cell-main--normal {
    font-weight: 400;
}