/*
|--------------------------------------------------------------------------
| Painel, cartões e listas de dados
|--------------------------------------------------------------------------
|
| Painel (.ds-panel) é o contêiner padrão: fundo branco + borda.
| Não é "card para tudo": um painel agrupa UMA coisa (a tabela, o
| formulário, os dados do responsável). Sem sombra.
|
| Cartões com propósito específico:
|   .ds-kpi       indicador (número + rótulo + variação)
|   .ds-summary   faixa de números de um registro (topo de detalhes)
|   .ds-card-link cartão clicável inteiro (atalhos, escolha de opção)
|
| Lista de dados (.ds-dl): visualização somente leitura rótulo → valor.
|
*/

.ds-panel {
    min-width: 0;

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

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

.ds-panel__header {
    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-3) var(--ds-space-5);

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

.ds-panel__title {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-2);

    font: var(--ds-text-section-title);
    letter-spacing: var(--ds-text-section-title-tracking);
}

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

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

.ds-panel__body {
    padding: var(--ds-space-5);
}

.ds-panel__footer {
    padding: var(--ds-space-3) var(--ds-space-5);

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

/*
|--------------------------------------------------------------------------
| Faixa de números (topo das telas de detalhe)
|--------------------------------------------------------------------------
*/

.ds-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    margin: 0;

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

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

.ds-summary__item {
    padding: var(--ds-space-3) var(--ds-space-4);

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

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

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

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

.ds-summary__value {
    margin: 2px 0 0;

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

    font: 600 18px/26px var(--ds-font);
    font-variant-numeric: tabular-nums;
}

/*
|--------------------------------------------------------------------------
| KPI
|--------------------------------------------------------------------------
*/

.ds-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-1);

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

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

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

.ds-kpi__label {
    color: var(--ds-color-text-secondary);

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

.ds-kpi__value {
    font: var(--ds-text-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ds-text-display-tracking);
}

.ds-kpi__delta {
    font: var(--ds-text-caption);
    font-weight: var(--ds-font-weight-medium);
}

.ds-kpi__delta--up { color: var(--ds-color-success-fg); }
.ds-kpi__delta--down { color: var(--ds-color-danger-fg); }

/*
|--------------------------------------------------------------------------
| Ranking (top N com trilho de volume)
|--------------------------------------------------------------------------
|
| Mesma gramática visual do .ds-funil (barra fina embaixo, proporcional
| ao maior valor da lista) — pra "quem está no topo de quê" (cargos com
| mais vagas, lojas com mais conexões...), sem gráfico de pizza.
|
|   <ul class="ds-rank">
|     <li class="ds-rank__item" style="--ds-rank-volume: 72%">
|       <span class="ds-rank__nome">Vendedor (a)</span>
|       <span class="ds-rank__valor">47</span>
|       <span class="ds-rank__trilho" aria-hidden="true"><span></span></span>
|     </li>
|   </ul>
*/

.ds-rank {
    display: grid;
    gap: var(--ds-space-1);

    margin: 0;
    padding: 0;

    list-style: none;
}

.ds-rank__item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);

    padding: var(--ds-space-2) 0 calc(var(--ds-space-2) + 6px);
}

.ds-rank__nome {
    overflow: hidden;

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

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

.ds-rank__valor {
    flex: none;

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

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

.ds-rank__trilho {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 4px;
    overflow: hidden;

    border-radius: var(--ds-radius-full);

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

.ds-rank__trilho > span {
    display: block;

    width: var(--ds-rank-volume, 0%);
    height: 100%;

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

/*
|--------------------------------------------------------------------------
| Cartão clicável
|--------------------------------------------------------------------------
*/

.ds-card-link {
    display: flex;
    gap: var(--ds-space-3);

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

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

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

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

    transition: border-color var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-card-link:hover {
    border-color: var(--ds-color-border-control);

    color: var(--ds-color-text);
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Lista de dados (somente leitura)
|--------------------------------------------------------------------------
*/

.ds-dl {
    display: grid;
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);

    margin: 0;
}

.ds-dl > dt,
.ds-dl > dd {
    margin: 0;
    padding: var(--ds-space-2) 0;

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

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

.ds-dl > dt:first-of-type,
.ds-dl > dd:first-of-type {
    padding-top: 0;

    border-top: 0;
}

.ds-dl > dt {
    padding-right: var(--ds-space-3);

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

.ds-dl > dd {
    color: var(--ds-color-text);

    overflow-wrap: anywhere;
}

/* Lista de registros relacionados dentro de um painel */
.ds-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

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

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

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

.ds-list__item:first-child {
    border-top: 0;
}

@media (max-width: 767.98px) {
    .ds-summary__item {
        border-top: var(--ds-border-width) solid var(--ds-color-border);
        border-left: 0;
    }

    .ds-summary__item:first-child {
        border-top: 0;
    }

    .ds-dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-dl > dt {
        padding-bottom: 0;
    }

    .ds-dl > dd {
        padding-top: 2px;

        border-top: 0;
    }

    .ds-panel__header,
    .ds-panel__body,
    .ds-panel__footer,
    .ds-list__item {
        padding-right: var(--ds-space-4);
        padding-left: var(--ds-space-4);
    }
}

/*
|--------------------------------------------------------------------------
| Grade de painéis (lançamento por loja, por vendedor…)
|--------------------------------------------------------------------------
| Um painel pequeno por registro, com os campos daquele registro. As
| colunas se ajustam à largura (mín. 240 px); no celular vira uma coluna.
|
|   <div class="ds-panel-grid">
|     <section class="ds-panel ds-panel--compact">
|       <header class="ds-panel__header"><h3 class="ds-panel__title">Loja Centro</h3></header>
|       <div class="ds-panel__body"> … .ds-field … </div>
|     </section>
|   </div>
*/

.ds-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--ds-space-4);
}

.ds-panel--compact .ds-panel__header {
    padding: var(--ds-space-3) var(--ds-space-4);
}

.ds-panel--compact .ds-panel__title {
    font: var(--ds-text-heading);
}

.ds-panel--compact .ds-panel__body {
    display: grid;
    gap: var(--ds-space-3);

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

/*
|--------------------------------------------------------------------------
| Acordeão (um bloco por loja, abre um de cada vez ou vários)
|--------------------------------------------------------------------------
| Usa o Collapse do Bootstrap. O gatilho recebe .collapsed quando fechado.
|
|   <div class="ds-accordion">
|     <section class="ds-accordion__item">
|       <h3 class="ds-accordion__header">
|         <button class="ds-accordion__trigger collapsed" type="button"
|                 data-bs-toggle="collapse" data-bs-target="#loja-1" aria-expanded="false">
|           <span class="ds-accordion__title">Loja Centro</span>
|           <span class="ds-accordion__meta">R$ 120.000,00</span>
|         </button>
|       </h3>
|       <div class="collapse" id="loja-1"><div class="ds-accordion__body"> … </div></div>
|     </section>
|   </div>
*/

.ds-accordion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-2);
}

.ds-accordion__item {
    min-width: 0;

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

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

.ds-accordion__header {
    margin: 0;

    font: inherit;
}

.ds-accordion__trigger {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);

    width: 100%;
    padding: var(--ds-space-3) var(--ds-space-5);

    border: 0;
    border-radius: inherit;

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

    font: var(--ds-text-heading);
    text-align: left;

    cursor: pointer;
}

.ds-accordion__trigger::after {
    content: "";

    flex: none;
    width: 8px;
    height: 8px;
    margin-left: auto;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

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

    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--ds-duration-normal) ease;
}

.ds-accordion__trigger:not(.collapsed) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    box-shadow: inset 3px 0 0 var(--ds-color-primary);
}

.ds-accordion__trigger:not(.collapsed)::after {
    transform: translateY(2px) rotate(-135deg);
}

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

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

.ds-accordion__title {
    min-width: 0;
}

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

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

.ds-accordion__body {
    padding: var(--ds-space-5);

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

.ds-accordion__body > * + * {
    margin-top: var(--ds-space-5);
}


/* Campos em linha dentro do painel compacto: rótulo à esquerda, valor curto à direita */
.ds-panel--compact .ds-panel__body > .ds-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-panel--compact .ds-panel__body > .ds-field > .ds-label {
    margin: 0;
}

/*
|--------------------------------------------------------------------------
| Ações no fim da página (fora de formulário)
|--------------------------------------------------------------------------
*/

.ds-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-3);

    margin-top: var(--ds-space-5);
}

.ds-page-actions > .ds-help {
    margin: 0;
}

/* Partes do item de lista: principal (nome + dados curtos) e ações à direita */
.ds-list__main {
    display: grid;
    gap: var(--ds-space-1);

    min-width: 0;
}

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

.ds-list__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ds-space-2);
}

.ds-list__actions .ds-select {
    width: auto;
    max-width: 200px;
}

/* Item em destaque (resultado de busca pronto para uma ação) */
.ds-list__item--destaque {
    padding: var(--ds-space-3) var(--ds-space-4);

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-left: 3px solid var(--ds-color-primary);
    border-radius: var(--ds-radius-md);

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

/* Lista dentro de modal: sem recuo lateral (o modal já tem) */
.ds-modal .ds-list__item:not(.ds-list__item--destaque) {
    padding-inline: 0;
}

/* …exceto quando a lista está dentro de um painel no modal: aí o painel dá a borda */
.ds-modal .ds-panel > .ds-list > .ds-list__item:not(.ds-list__item--destaque) {
    padding-inline: var(--ds-space-5);
}

@media (max-width: 575.98px) {
    .ds-list__item {
        flex-wrap: wrap;
    }
}

/* Título de grupo antes de um acordeão (ex.: setor) */
.ds-apuracao__setor {
    float: none;
    clear: both;

    margin: var(--ds-space-5) 0 var(--ds-space-3);
}

.ds-apuracao__setor:first-child {
    margin-top: 0;
}

/*
|--------------------------------------------------------------------------
| Gráfico (Chart.js) dentro de painel
|--------------------------------------------------------------------------
| <div class="ds-grafico"><canvas></canvas></div>  — altura fixa; rola na
| horizontal quando há muitas barras (o script alarga o canvas).
*/
.ds-grafico {
    position: relative;

    height: 360px;
    overflow-x: auto;
}

.ds-grafico--alto {
    height: 440px;
}

/* Resultados montados por script: mesmo espaçamento entre painéis da página */
.ds-relatorio {
    display: flex;
    flex-direction: column;
    gap: var(--ds-section-gap);
}

/*
| Item de lista selecionável: caixa de marcar à esquerda, destaque ao marcar.
|   <div class="ds-list__item ds-list__item--selecionavel">
|     <label class="ds-check ds-list__check"><input class="ds-check__input" type="checkbox"></label>
|     <div class="ds-list__main">…</div> <div class="ds-list__actions">…</div>
|   </div>
*/
.ds-list__item--selecionavel {
    justify-content: flex-start;
}

.ds-list__item--selecionavel > .ds-list__main {
    flex: 1 1 auto;
}

.ds-list__check {
    flex: none;

    margin: 0;
}

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

.ds-list__item--selecionavel:has(.ds-check__input:checked) {
    background: var(--ds-color-surface-selected);
    box-shadow: inset 3px 0 0 var(--ds-color-primary);
}