/* ---------------------------------------------------------------------------
   Gestao de Caixa — handoff `handoff_gestao_caixa` (tema verde claro).

   Monta em `gestao_caixa_layout` / `gen_resumo_liq_layout` / `gen_anotacoes_layout`
   (`layouts/erp/gestao_fidc.py`) e nas callbacks de
   `callbacks/erp/gestao_fidc/callbacks_gestao_caixa.py`.

   Campos, checkboxes, selects e botoes vem do `filtros_solic_v2`
   (`tema_solicitacoes_v2.css`), que todo cartao da tela leva; a linha de campos e o
   rotulo avulso sao os do Acompanhamento (`linha_filtros_acomp_v2`,
   `rotulo_campo_acomp_v2`). Aqui entram o cartao, as tabelas, as metricas, os chips, as
   sub-abas e o painel de anotacoes. Tokens `--v-*` de `tema_conteudo_v2.css`.

   Este arquivo carrega ANTES do `tema_solicitacoes_v2.css` (ordem alfabetica): onde
   precisa vencer uma regra de la, o seletor leva uma classe a mais.
   --------------------------------------------------------------------------- */

.pagina_caixa_v2 {
    font-family: Manrope, sans-serif;
}

/* ============================================================ CARTAO */

.card_caixa_v2.mantine-Card-root {
    padding: 0;
    border-color: var(--v-borda-clara);
    border-radius: 10px;
    overflow: visible;
}

.cabecalho_card_caixa_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 22px;
}

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

.corpo_card_caixa_v2 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 22px 20px;
}

.vazio_caixa_v2 {
    padding: 4px 22px 18px;
    font: 500 13px Manrope, sans-serif;
    color: #93A6A0;
}

.neg_caixa_v2 {
    color: #C4553F !important;
}

/* ============================================================ TOPO (data de referencia) */

.topo_caixa_v2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.data_caixa_v2 {
    width: 190px;
}

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

/* Botao secundario: contorno tint, texto verde, fundo tint no hover. */
.filtros_solic_v2 .btn_sec_caixa_v2.mantine-Button-root {
    padding: 0 16px;
    border: 1px solid var(--v-borda-tint);
    background: #fff;
    color: var(--v-verde-escuro);
}

.filtros_solic_v2 .btn_sec_caixa_v2.mantine-Button-root:hover {
    background: var(--v-tint);
}

/* ============================================================ SEGMENTADO (Resumo | Completo) */

/* O `segmented_v2` (`tema_conteudo_v2.css`) ja desenha o controle; aqui so a altura de
   32px do cabecalho. A versao "alta" (Fluxo Semanal) acompanha os campos de 42px. */
.segmentado_caixa_v2.segmented_v2 .form-check-label {
    padding: 6px 14px;
    font-size: 12.5px;
}

.segmentado_alto_caixa_v2.segmented_v2 .form-check-label {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
}

/* ============================================================ TABELA (composicao / por fundo) */

.rolagem_caixa_v2 {
    overflow-x: auto;
}

.tabela_caixa_v2 {
    width: 100%;
    border-collapse: collapse;
    font-family: Manrope, sans-serif;
}

.tabela_caixa_v2 th {
    padding: 12px 22px;
    background: var(--v-tab-cabecalho);
    font: 800 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    text-align: center;
    white-space: nowrap;
}

.tabela_caixa_v2 th:first-child {
    text-align: left;
}

.tabela_caixa_v2 td {
    padding: 16px 22px;
    border-top: 1px solid var(--v-tab-divisoria);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    text-align: center;
    white-space: nowrap;
}

.tabela_caixa_v2 td.nome_caixa_v2 {
    font-weight: 700;
    text-align: left;
}

.tabela_caixa_v2 td.destaque_caixa_v2 {
    font-weight: 800;
    color: var(--v-verde-escuro);
}

.tabela_caixa_v2 tr.total_caixa_v2 td {
    background: var(--v-tab-hover);
    font-weight: 800;
}

/* O cartao tem cantos de 10px e a tabela encosta nas bordas: o ultimo canto do corpo
   acompanha. */
.card_caixa_v2 > .rolagem_caixa_v2,
.card_caixa_v2 .mantine-Card-root > div > .rolagem_caixa_v2 {
    border-radius: 0 0 10px 10px;
}

/* Tabela por fundo dentro do detalhamento: moldura propria, e o Nao pago em 800. */
.tabela_fundos_liq_caixa_v2 .rolagem_caixa_v2 {
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
}

.tabela_fundos_liq_caixa_v2 .tabela_caixa_v2 tr:first-child td {
    border-top: 1px solid var(--v-tab-divisoria);
}

.tabela_fundos_liq_caixa_v2 .tabela_caixa_v2 td:last-child {
    font-weight: 800;
}

/* ============================================================ LIQUIDACOES DO DIA */

.link_detalhe_caixa_v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    cursor: pointer;
}

.link_detalhe_caixa_v2:hover {
    color: #25765D;
}

.link_detalhe_caixa_v2 .chevron_caixa_v2 {
    transition: transform .2s;
}

.link_detalhe_caixa_v2.aberto .chevron_caixa_v2 {
    transform: rotate(180deg);
}

.grade_metricas_caixa_v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    padding: 0 22px 20px;
}

.metrica_caixa_v2 {
    padding-top: 4px;
}

.metrica_caixa_v2 + .metrica_caixa_v2 {
    padding-left: 22px;
    border-left: 1px solid var(--v-tab-divisoria);
}

.rotulo_metrica_caixa_v2 {
    margin-bottom: 6px;
    font: 600 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.valor_metrica_caixa_v2 {
    font: 800 16px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* A folga entre o cartao das liquidacoes e o do detalhamento mora dentro do collapse:
   fechado, ele nao deixa buraco no `gap` da pagina. */
.folga_detalhe_caixa_v2 {
    padding-top: 22px;
}

/* ============================================================ SUB-ABAS DO DETALHAMENTO */

.subabas_caixa_v2 .mantine-Tabs-list {
    gap: 22px;
    padding: 0 22px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.subabas_caixa_v2 .mantine-Tabs-list::before {
    border-color: var(--v-borda-clara);
}

.subabas_caixa_v2 .mantine-Tabs-tab {
    flex: none;
    padding: 4px 2px 12px;
    border-bottom-width: 2px;
    background: transparent;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-texto-inativo);
}

.subabas_caixa_v2 .mantine-Tabs-tab:hover {
    background: transparent;
    border-color: transparent;
    color: var(--v-verde-escuro);
}

.subabas_caixa_v2 .mantine-Tabs-tab[data-active],
.subabas_caixa_v2 .mantine-Tabs-tab[data-active]:hover {
    border-color: var(--v-verde-escuro);
    font-weight: 800;
    color: var(--v-verde-escuro);
}

.subabas_caixa_v2 .mantine-Tabs-panel {
    padding: 18px 22px 22px;
}

.corpo_detalhe_caixa_v2 {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ============================================================ PAINEL DE FILTROS */

.painel_filtros_caixa_v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
    background: var(--v-tab-hover);
}

.selects_painel_caixa_v2 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 18px;
}

.painel_filtros_caixa_v2 .mantine-Input-input {
    --input-height: 40px;
    min-height: 40px;
    background: #fff;
}

.painel_filtros_caixa_v2 .mantine-Input-placeholder,
.painel_filtros_caixa_v2 .mantine-PillsInput-input input::placeholder {
    color: #93A6A0;
}

/* ============================================================ CHIPS */

/* Sobre `dbc.RadioItems` / `dbc.Checklist`: o input some e quem desenha e o label (o
   `for` do label e que alterna). No multi, a chip ativa ganha o check de 11px. */
.chips_caixa_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chips_caixa_v2 .form-check {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.chips_caixa_v2 .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chips_caixa_v2 .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--v-borda-input);
    border-radius: 14px;
    background: #fff;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-texto-inativo);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.chips_caixa_v2 .form-check-label:hover {
    border-color: var(--v-verde-escuro);
}

.chips_caixa_v2 .form-check:has(.form-check-input:checked) .form-check-label {
    border-color: var(--v-borda-tint);
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

.chips_caixa_v2 .form-check:has(.form-check-input:checked) .form-check-label:hover {
    border-color: var(--v-verde-escuro);
}

.chips_multi_caixa_v2 .form-check:has(.form-check-input:checked) .form-check-label::before {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8B6F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================ FLUXO PROJETADO */

/* Parametros numa faixa so: campos, otica e botoes na primeira linha (alinhados pela
   base), as opcoes de cessao embaixo. As anotacoes sairam para um modal. */
.params_fluxo_caixa_v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 22px 20px;
}

.dias_caixa_v2 {
    width: 150px;
}

.dias_medias_caixa_v2 {
    width: 230px;
}

/* Chips na linha dos campos de 42px: centralizados na altura do campo. */
.chips_linha_caixa_v2 {
    min-height: 42px;
    align-items: center;
}

.botoes_fluxo_caixa_v2 {
    margin-left: auto;
}

.opcoes_fluxo_caixa_v2 {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    min-height: 40px;
}

.vl_cessao_caixa_v2 {
    width: 240px;
}

/* Botao das anotacoes no cabecalho: texto verde sem moldura, para nao competir com o
   Atualizar. */
.btn_notas_fluxo_caixa_v2.mantine-Button-root {
    font: 700 13px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

.btn_notas_fluxo_caixa_v2.mantine-Button-root:hover {
    background: var(--v-tint);
}

.sufixo_caixa_v2 {
    font: 600 12.5px Manrope, sans-serif;
    color: #93A6A0;
}

.check_zerar_caixa_v2.mantine-Checkbox-root:has(.mantine-Checkbox-input:checked) .mantine-Checkbox-label {
    color: #C4553F;
}

.botoes_fluxo_caixa_v2 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Dentro do modal o titulo ja e o do cabecalho do modal, e o painel vira cartao branco
   sobre o fundo cinza do corpo. */
.painel_modal_remessas_v2 .painel_notas_caixa_v2 {
    background: #fff;
    border-color: var(--v-borda-clara);
}

.painel_modal_remessas_v2 .titulo_notas_caixa_v2 {
    display: none;
}

/* ---- anotacoes */

.painel_notas_caixa_v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
    background: var(--v-tab-hover);
}

.cabecalho_notas_caixa_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.titulo_notas_caixa_v2 {
    margin-right: 8px;
    font: 700 12px Manrope, sans-serif;
    letter-spacing: .6px;
    color: var(--v-verde-escuro);
}

.atualizado_notas_caixa_v2,
.atualizado_notas_caixa_v2 label {
    margin: 0;
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

.filtros_solic_v2 .textarea_notas_caixa_v2 .mantine-Input-input {
    min-height: 150px;
    padding: 12px 14px;
    background: #fff;
    font: 500 13px/1.6 Manrope, sans-serif;
}

.filtros_solic_v2 .textarea_notas_caixa_v2 .mantine-Input-input[readonly] {
    color: var(--v-texto-inativo);
}

.rodape_notas_caixa_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.botoes_notas_caixa_v2 {
    display: flex;
    gap: 8px;
}

.filtros_solic_v2 .btn_notas_caixa_v2.mantine-Button-root {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.filtros_solic_v2 .btn_cancelar_notas_caixa_v2.mantine-Button-root {
    border-color: var(--v-borda-input);
    background: #fff;
    color: var(--v-texto-inativo);
}

.filtros_solic_v2 .btn_cancelar_notas_caixa_v2.mantine-Button-root:hover {
    background: var(--v-tab-cabecalho);
}

/* Desabilitados como no handoff, e nao o cinza padrao do Mantine. */
.filtros_solic_v2 .btn_cancelar_notas_caixa_v2.mantine-Button-root:disabled {
    border-color: var(--v-borda-input);
    background: #fff;
    color: #93A6A0;
}

.filtros_solic_v2 .btn_notas_caixa_v2:not(.btn_cancelar_notas_caixa_v2).mantine-Button-root:disabled {
    border-color: transparent;
    background: var(--v-borda-tint);
    color: #fff;
}

/* ---- grafico */

.linha_exibir_caixa_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rotulo_exibir_caixa_v2 {
    margin-right: 14px;
    font: 700 12px Manrope, sans-serif;
    letter-spacing: .6px;
    color: var(--v-verde-escuro);
}

/* Legenda que liga/desliga a serie: o input some, o swatch e o `::before` do label. A
   cor de cada swatch segue a ordem das opcoes (Valor de face, Valor constituido). */
.legenda_caixa_v2 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.legenda_caixa_v2 .form-check {
    display: flex;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.legenda_caixa_v2 .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.legenda_caixa_v2 .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-texto-inativo);
    cursor: pointer;
}

.legenda_caixa_v2 .form-check-label::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--v-tab-divisoria);
}

.legenda_caixa_v2 .form-check:nth-child(1):has(.form-check-input:checked) .form-check-label::before {
    background: #2E8B6F;
}

.legenda_caixa_v2 .form-check:nth-child(2):has(.form-check-input:checked) .form-check-label::before {
    background: #9CCBBB;
}

.legenda_caixa_v2 .form-check:has(.form-check-input:checked) .form-check-label {
    color: var(--v-tab-texto);
}

.grafico_caixa_v2 > div {
    min-width: 520px;
}

.legenda_eixo_caixa_v2 {
    margin-top: 8px;
    text-align: center;
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

/* ============================================================ FLUXO SEMANAL */

.select_fundo_caixa_v2 {
    width: 220px;
}

.semanas_caixa_v2 {
    width: 100px;
}

/* ============================================================ ESTREITO */

@media (max-width: 700px) {
    .cabecalho_card_caixa_v2 {
        padding: 14px 16px;
    }

    .corpo_card_caixa_v2,
    .params_fluxo_caixa_v2 {
        padding: 0 16px 16px;
    }

    .grade_metricas_caixa_v2 {
        grid-template-columns: 1fr;
        padding: 0 16px 16px;
    }

    .metrica_caixa_v2 + .metrica_caixa_v2 {
        margin-top: 10px;
        padding-top: 14px;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--v-tab-divisoria);
    }

    .dias_caixa_v2,
    .dias_medias_caixa_v2,
    .vl_cessao_caixa_v2,
    .botoes_fluxo_caixa_v2 {
        width: 100%;
        margin-left: 0;
    }

    .subabas_caixa_v2 .mantine-Tabs-list {
        padding: 0 16px;
    }

    .subabas_caixa_v2 .mantine-Tabs-panel {
        padding: 16px;
    }

    .tabela_caixa_v2 th,
    .tabela_caixa_v2 td {
        padding-left: 16px;
        padding-right: 16px;
    }

    .data_caixa_v2,
    .select_fundo_caixa_v2,
    .semanas_caixa_v2 {
        width: 100%;
    }

    .grafico_caixa_v2 > div {
        min-width: 560px;
    }
}