/* ---------------------------------------------------------------------------
   Topo do Historico — handoff `HISTORICO_PORTAL.md`.

   Cobre o que vem antes da tabela: o callout ambar, a linha de filtros e o cartao
   Resumo. A tabela em si e do `html_table` e ja tem a sua folha (`tema_conteudo_v2.css`,
   secao `corpo_html_table`) — nada aqui a alcanca.

   Monta em `gen_historico_cessoes` (`layouts/erp/antecipacoes.py`) e, no caso do Resumo,
   em `load_div_hist_cessoes` (`callbacks/erp/callbacks_antecipacoes.py`).

   Os tokens sao os `--v-*` de `tema_conteudo_v2.css`; nao ha cor crua aqui. Os cartoes
   do Resumo reusam `.cartao_indicador_v2` / `.rotulo_indicador_v2` / `.valor_indicador_v2`
   do `tema_simulador_v2.css` — sao o mesmo objeto (rotulo em caixa alta + numero), e o
   `indicador_interno_v2` de la ja e a marcacao de "so o adm ve" que o handoff pede para
   Taxa Media (DC) e Spread Medio.

   Este arquivo carrega **antes** de `tema_simulador_v2.css` (o Dash serve os assets em
   ordem alfabetica, e h < s): as classes daqui sao novas de proposito, nenhuma tenta
   sobrescrever as de la, porque perderia.
   --------------------------------------------------------------------------- */

/* ============================================================ AVISO */

/* O corpo so precisa esticar quando ha um controle no canto (o × que fecha) — senao o
   × colaria no fim da ultima linha de texto em vez de ir para a margem. */
.corpo_aviso_v2 {
    flex: 1;
    min-width: 0;
}

.fechar_aviso_v2 {
    flex: none;
    line-height: 1;
    font: 600 15px Manrope, sans-serif;
    color: #B99B5C;
    cursor: pointer;
}

.fechar_aviso_v2:hover {
    color: var(--v-aviso-forte);
}

/* ============================================================ FILTROS */

/* Alinhamento pelo rodape, e nao pelo topo: os campos tem alturas diferentes (o Periodo
   carrega o link "Periodo customizado" embaixo), e o que precisa ficar na mesma linha
   sao os controles, nao os rotulos. */
.filtros_hist_v2 {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    /* Medido a partir do link do periodo, que e o elemento mais baixo da linha; os
       demais campos ganham mais 23px pela regra do fim desta secao. */
    margin-bottom: 16px;
}

.campo_filtro_v2 {
    display: flex;
    flex-direction: column;
}

/* Campos que o callback esconde trocando a `className` do filho (cedente antes de
   carregar, ticket sempre): sem isto o rotulo ficaria orfao e o `gap` da linha abriria
   um buraco onde nao ha campo. */
.campo_oculto_v2:has(> .hidden) {
    display: none;
}

.rotulo_filtro_v2 {
    margin-bottom: 7px;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* 42px em todos os controles da linha. O Mantine dimensiona pelo `--input-height`, entao
   nao basta o `height` — a altura tambem entra no calculo interno do padding das pills e
   do chevron. */
.filtros_hist_v2 .mantine-Input-input {
    --input-height: 42px;
    min-height: 42px;
    border-radius: 10px;
    border-color: var(--v-borda-input);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.filtros_hist_v2 .mantine-Input-input:focus,
.filtros_hist_v2 .mantine-Input-input:focus-within {
    border-color: var(--v-verde-escuro);
}

.filtros_hist_v2 .mantine-Input-input::placeholder,
.filtros_hist_v2 .mantine-PillsInputField-field::placeholder {
    color: #93A6A0;
}

.campo_periodo_v2 .mantine-Input-input,
.campo_periodo_v2 .mantine-Select-input {
    min-width: 11rem;
}

/* Largura cravada, e nao `min-width`: o `MultiSelect` do Mantine quer 100% do pai, e
   num item de flex de largura automatica isso vira "o maximo que couber" — a Ocorrencia
   engolia a sobra da linha e jogava o "Atualizar" na outra ponta. Os 220px sao os do
   handoff. */
/* Sem largura fixa: os 220px do handoff viram piso, e o campo cresce com as tags que a
   pessoa escolheu. Fixa, a segunda ocorrencia quebrava a caixa em duas linhas e tirava o
   campo da altura dos vizinhos; larga o bastante para caber duas, sobrava um vazio enorme
   quando so havia uma.

   `flex: 0 0 auto` (e nao o `0 1 auto` padrao) para o campo nao encolher e reintroduzir a
   quebra quando a linha fica apertada — nesse caso ele desce inteiro, que e o
   comportamento do `flex-wrap` da linha. */
.campo_cedente_v2,
.campo_ocorrencia_v2 {
    flex: 0 0 auto;
    width: auto;
    min-width: 220px;
}

.campo_cedente_v2 .mantine-InputWrapper-root,
.campo_ocorrencia_v2 .mantine-InputWrapper-root {
    width: 100%;
}

/* O div do cedente leva `flex_mobile` do callback, e essa classe e o oposto do que o nome
   sugere: `mobile.css` a declara como `flex-direction: row` no caso base e so vira
   `column` dentro do `@media (min-width: 768px)`. Em linha, o `dcc.Loading` de dentro vira
   item de flex dimensionado pelo conteudo, e abaixo de 768px o campo parava de acompanhar
   a largura da coluna — no desktop ninguem via, porque la ja e coluna.

   Sempre coluna: a caixa e uma so, nao ha nada para ficar ao lado. */
.campo_cedente_v2 > .flex_mobile {
    flex-direction: column;
}

/* Tags da ocorrencia e do cedente: pill tintada, do mesmo verde do resto.

   26px de altura e o que faz a caixa fechar nos 42px: a tag mora dentro do input, com
   5.5px de folga em cima e embaixo. Na altura automatica ela dava 32px e empurrava o
   campo para 45px. */
.filtros_hist_v2 .mantine-Pill-root {
    height: 26px;
    padding: 0 10px;
    line-height: 1;
    border: 1px solid var(--v-borda-tint);
    border-radius: 14px;
    background: var(--v-tint);
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

/* O campo de busca ao lado das tags pede 100px por padrao, e era isso que jogava a busca
   para a segunda linha assim que havia uma tag. Encolhe ate 60px quando divide a linha, e
   cresce para ocupar a caixa quando esta sozinho — senao o "Selecione o cedente..." do
   campo vazio sairia cortado. */
.filtros_hist_v2 .mantine-PillsInputField-field {
    width: 60px;
    min-width: 60px;
    flex: 1 1 60px;
}

.filtros_hist_v2 .mantine-Pill-remove {
    color: #6B9C8B;
}

/* O link "Periodo customizado" / "Periodos padrao" mora debaixo do campo do periodo, e
   e o unico campo com algo debaixo do controle. Com `align-items: flex-end`, o que fica
   na mesma linha e o rodape do **campo**, entao sem correcao o input do periodo subiria
   sozinho a altura do link. A folga vai nos outros campos, e nao um `margin` negativo no
   link: negativo tiraria o link do fluxo e ele passaria por cima do cartao de baixo. */
.filtros_hist_v2 > *:not(.campo_periodo_v2) {
    margin-bottom: 23px;
}

.campo_periodo_v2 .link {
    margin-top: 6px;
    font: 600 11.5px Manrope, sans-serif;
}

.btn_atualizar_hist_v2.mantine-Button-root {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

/* Botao dos filtros avancados: quadrado neutro, nao verde. Ele abre e fecha um painel,
   nao executa a busca — o unico verde da linha e o "Atualizar". */
.btn_filtros_v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--v-tab-cabecalho);
    color: var(--v-texto-inativo);
    cursor: pointer;
}

.btn_filtros_v2:hover,
.btn_filtros_v2:focus {
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

/* ============================================================ RESUMO */

.cartao_resumo_v2 {
    padding: 18px 22px;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
}

.cabecalho_resumo_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.titulo_resumo_v2 {
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.periodo_resumo_v2 {
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

/* Numero de colunas cravado, e nao `auto-fit`: com `minmax` a grade fecharia sete
   cartoes numa fila so nas telas largas, e o handoff quebra em duas justamente para o
   bloco nao virar uma regua de numeros. */
.grade_resumo_v2 {
    display: grid;
    gap: 14px;
}

.grade_resumo_5_v2 {
    grid-template-columns: repeat(5, 1fr);
}

.grade_resumo_4_v2 {
    grid-template-columns: repeat(4, 1fr);
}

.grade_resumo_v2 + .grade_resumo_v2 {
    margin-top: 14px;
}

/* O Δ de exposicao chega como `html.Label` colorido; herda o tamanho do cartao mas
   guarda a propria cor, que e o que ela diz. */
.valor_indicador_v2 label {
    font: inherit;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .grade_resumo_5_v2,
    .grade_resumo_4_v2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .grade_resumo_v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cartao_resumo_v2 {
        padding: 16px;
    }

    .cabecalho_resumo_v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* O piso de 220px dos campos de tag sai do caminho: no celular quem manda e a
       largura da tela. */
    .filtros_hist_v2 > * {
        width: 100%;
        min-width: 0;
    }

    .filtros_hist_v2 > *:not(.campo_periodo_v2) {
        margin-bottom: 0;
    }

    .btn_atualizar_hist_v2.mantine-Button-root {
        width: 100%;
    }
}