/*
 * Card "Demonstrativo da venda" — mesmo formato de variáveis de tema
 * claro/escuro já usado em dashboard.css/relatorios.css, escopado em
 * .venda-demonstrativo (wrapper próprio).
 */

/*
 * Cards "Venda" / "Destino" (topo da tela de Visualizar Venda) com a
 * mesma altura, mesmo quando um tem menos campos preenchidos que o
 * outro (ex.: venda em rascunho tem só 2 linhas contra as 3 do
 * Destino) — sem isso, o grid do Filament já estica a coluna (largura
 * igual), mas o <section> em si (display: block) não preenche essa
 * altura, deixando a borda/fundo de um card mais curto que o outro.
 *
 * Escopado via :has(.venda-cards-altura-igual) para não afetar nenhum
 * outro Section do sistema — só entra em ação no grid que realmente
 * contém um desses dois cards.
 */
.fi-grid:has(.venda-cards-altura-igual) > .fi-grid-col,
.fi-grid:has(.venda-cards-altura-igual) > .fi-grid-col > .fi-sc-component,
.fi-grid:has(.venda-cards-altura-igual) > .fi-grid-col > .fi-sc-component > .venda-cards-altura-igual,
.fi-grid:has(.venda-cards-altura-igual) > .fi-grid-col > .fi-sc-component > .venda-cards-altura-igual > .fi-section {
    height: 100%;
}

/*
 * A tela de Visualizar Venda tem muitas ações no cabeçalho (Data da
 * venda, Entrega, Nota fiscal, Minutas, Concluir, Cancelar). O Filament
 * marca a área de ações do cabeçalho como `flex-shrink: 0`, então quando
 * elas não cabem numa linha o título é que é espremido (quebra em várias
 * linhas) e os botões vazam para fora da tela. Aqui deixamos a área de
 * ações encolher e quebrar para uma segunda linha, alinhada à direita.
 *
 * Escopado via :has(.venda-demonstrativo) — só a ViewVenda renderiza
 * esse wrapper, nenhuma outra página do painel é afetada.
 */
.fi-main:has(.venda-demonstrativo) .fi-header-actions-ctn {
    min-width: 0;
    flex-shrink: 1;
}

.fi-main:has(.venda-demonstrativo) .fi-header-actions-ctn > .fi-ac {
    justify-content: flex-end;
}

.venda-demonstrativo {
    --vd-text-primary: var(--app-text);
    --vd-text-secondary: var(--app-secondary);
    --vd-text-muted: var(--app-muted);
    --vd-divider: var(--app-divider);
    --vd-card-border: var(--app-border);
    --vd-destaque-bg: var(--app-accent-soft);
    --vd-destaque-text: var(--app-accent);
    --vd-resultado-bg: rgba(16, 185, 129, 0.07);
    --vd-resultado-border: rgba(16, 185, 129, 0.3);
    --vd-lucro-text: #047857;
    --vd-resultado-bg-negativo: rgba(239, 68, 68, 0.07);
    --vd-resultado-border-negativo: rgba(239, 68, 68, 0.3);
    --vd-lucro-text-negativo: #b91c1c;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-size: 0.8125rem;
    padding: 1rem;
    border: 1px solid var(--vd-card-border);
    border-radius: 0.75rem;
}

@media (min-width: 1536px) {
    .venda-demonstrativo {
        position: sticky;
        top: 1.5rem;
    }
}

.dark .venda-demonstrativo {
    --vd-text-primary: var(--app-text);
    --vd-text-secondary: var(--app-secondary);
    --vd-text-muted: var(--app-muted);
    --vd-divider: var(--app-divider);
    --vd-card-border: var(--app-border);
    --vd-destaque-bg: var(--app-accent-soft);
    --vd-destaque-text: var(--app-accent);
    --vd-resultado-bg: rgba(16, 185, 129, 0.1);
    --vd-resultado-border: rgba(16, 185, 129, 0.35);
    --vd-lucro-text: #34d399;
    --vd-resultado-bg-negativo: rgba(239, 68, 68, 0.12);
    --vd-resultado-border-negativo: rgba(239, 68, 68, 0.4);
    --vd-lucro-text-negativo: #f87171;
}

.venda-demonstrativo__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.venda-demonstrativo__baixar {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--vd-divider);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vd-text-primary);
    white-space: nowrap;
    transition: background-color 0.15s;
}

.venda-demonstrativo__baixar:hover {
    background-color: var(--vd-divider);
}

.venda-demonstrativo__baixar-icone {
    width: 1rem;
    height: 1rem;
}

.venda-demonstrativo__titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--vd-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.venda-demonstrativo__grupo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vd-divider);
}

.venda-demonstrativo__grupo:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.venda-demonstrativo__rotulo-grupo {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--vd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.venda-demonstrativo__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--vd-text-secondary);
}

/*
 * Rótulo pode quebrar/encolher; o valor (última span) nunca quebra e
 * nunca é espremido — sem isso rótulos longos (ex.: "Imposto (6,4791%)
 * sobre a margem") estouram a largura do card.
 */
.venda-demonstrativo__linha > span:first-child,
.venda-demonstrativo__resultado-linha > span:first-child {
    min-width: 0;
}

.venda-demonstrativo__linha > span:last-child,
.venda-demonstrativo__resultado-linha > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
}

/*
 * Toda linha de "Total ..." fica destacada em amarelo (chip com fundo
 * âmbar) — sinaliza os subtotais/fechamentos de cada grupo do
 * demonstrativo.
 */
.venda-demonstrativo__linha--total {
    margin-top: 0.125rem;
    padding: 0.4375rem 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--vd-destaque-bg);
    font-weight: 700;
    color: var(--vd-destaque-text);
}

.venda-demonstrativo__linha--destaque {
    color: var(--vd-destaque-text);
}

.venda-demonstrativo__resultado {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    background-color: var(--vd-resultado-bg);
    border: 1px solid var(--vd-resultado-border);
}

.venda-demonstrativo__resultado--negativo {
    background-color: var(--vd-resultado-bg-negativo);
    border-color: var(--vd-resultado-border-negativo);
}

.venda-demonstrativo__resultado--negativo .venda-demonstrativo__resultado-linha {
    color: var(--vd-lucro-text-negativo);
}

.venda-demonstrativo__resultado-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 700;
    color: var(--vd-lucro-text);
    font-size: 0.8125rem;
}

.venda-demonstrativo__resultado-valor {
    font-size: 0.9375rem;
}

.venda-demonstrativo__resultado-linha--secundaria {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--vd-text-secondary);
}

.venda-demonstrativo__tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--vd-text-muted);
    white-space: nowrap;
}

/* Exceção de rateio da venda (selo + autor/motivo) e botões abaixo do "Total rateado". */
.venda-demonstrativo__rateio-personalizado { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; padding: .6rem .7rem; border-radius: .5rem; background: color-mix(in srgb, #f59e0b 10%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); }
.venda-demonstrativo__rateio-personalizado .fi-badge { align-self: flex-start; }
.venda-demonstrativo__rateio-personalizado p { margin: 0; font-size: .75rem; opacity: .85; }
.venda-demonstrativo__rateio-motivo { font-style: italic; }
/* Um botão por linha (card estreito), com respiro entre eles. */
.venda-demonstrativo__rateio-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: .9rem; }