/* ---------------------------------------------------------------------------
   Modal "Gerar baixa" (Valid, tela de Conta Corrente) — handoff `modal_gerar_baixa`.

   Monta em `modal_actions_layout` / `load_md`, em `callbacks/callbacks_cc_v2.py`.

   E o mesmo desenho do modal "Nova coobrigação": casca, cartoes, rotulos, segmentado,
   chips, metricas e rodape vem de `tema_coobrigacao_v2.css` (o conteudo do modal leva
   `painel_modal_coobr_v2`). Aqui so o que o Valid tem e a coobrigacao nao.

   Tokens: os `--v-*` de `tema_conteudo_v2.css`.
   --------------------------------------------------------------------------- */

/* As linhas de campo sao flex: sem isso o `hidden` do callback perde para o display. */
.corpo_valid_v2 [hidden] {
    display: none !important;
}

/* Cabecalho do estoque: "Valor estoque" + "Atualizar" ficam sempre a direita; quem quebra
   de linha, se faltar espaco, sao os links do grupo da esquerda. No mobile volta a empilhar. */
.corpo_valid_v2 .cabecalho_cartao_coobr_v2 {
    flex-wrap: nowrap;
}

.corpo_valid_v2 .cabecalho_cartao_coobr_v2 > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.corpo_valid_v2 .cabecalho_cartao_coobr_v2 > :last-child {
    flex: none;
}

.corpo_valid_v2 .cabecalho_cartao_coobr_v2 .grupo_cabecalho_coobr_v2 {
    gap: 8px 10px;
}

@media (max-width: 767.98px) {
    .corpo_valid_v2 .cabecalho_cartao_coobr_v2 {
        flex-wrap: wrap;
    }
}

/* ============================================================ LINKS */

/* Os dois links quebram de linha juntos (sem o "|" do handoff: com o valor do estoque
   na casa dos milhoes o cabecalho nao cabe em uma linha e o separador sobrava no inicio). */
.links_valid_v2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.link_valid_v2 {
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
}

.link_valid_v2:hover {
    color: var(--v-marca-hover);
}

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

/* `inline-flex` no .form-check: com o label inline-flex dentro de um bloco, a linha de
   base sobra 8px embaixo e o chip sai desalinhado dos campos de 42px. */
.chip_pequeno_valid_v2.form-check,
.chip_alto_valid_v2.form-check {
    display: inline-flex;
}

.chip_pequeno_valid_v2 .form-check-label {
    height: 32px;
}

.chip_alto_valid_v2 .form-check-label {
    height: 42px;
}

.painel_modal_coobr_v2 .btn_mini_valid_v2.mantine-Button-root {
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
}

/* ============================================================ LINHAS VALID */

.cartao_linhas_valid_v2 {
    gap: 12px;
}

/* Seletor de linhas (`filtro_og_disp_v2`, em `tema_simulador_v2.css`) na largura do
   cartao, e nao nos 340px do de originador. O wrapper do `dmc.Popover` vem com
   `width: fit-content` inline; como item flex, o `flex: 1` ignora o `width`. */
.seletor_linhas_valid_v2 > div {
    flex: 1;
    min-width: 0;
}

.seletor_linhas_valid_v2 .alvo_filtro_og_v2 {
    width: 100%;
}

.total_linhas_valid_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--v-tab-divisoria);
}

/* ============================================================ CEDENTE */

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

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

.valor_metrica_coobr_v2.valor_metrica_valid_v2 {
    margin-top: 3px;
    font-size: 16px;
}

.valor_metrica_coobr_v2.negativo_valid_v2 {
    color: var(--v-erro-icone);
}

/* ============================================================ VENCIMENTOS */

.hint_valid_v2 {
    margin-top: -6px;
    font: 500 12px Manrope, sans-serif;
    color: #93A6A0;
}

/* dcc.DatePickerRange (react-dates) na pele dos campos de 42px. */
.range_valid_v2 .DateRangePickerInput {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 6px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    background: #fff;
}

.range_valid_v2 .DateInput {
    width: 104px;
    background: transparent;
}

.range_valid_v2 .DateInput_input {
    height: 38px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.range_valid_v2 .DateInput_input__focused {
    border-bottom: 2px solid var(--v-verde-escuro);
}

.range_valid_v2 .DateRangePickerInput_arrow {
    color: var(--v-tab-texto-sub);
}

/* ============================================================ VALOR A BAIXAR */

.grade_valor_valid_v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.input_valor_valid_v2 {
    max-width: 320px;
}

.input_valor_valid_v2 .mantine-Input-input {
    padding-left: 60px;
}

/* Area de aviso sem conteudo nao soma o gap da pilha. (Os wrappers do dcc.Loading ficam:
   o spinner e um <span> vazio e sumiria junto.) */
.corpo_valid_v2 .pilha_resumo_coobr_v2 > :empty {
    display: none;
}

@media (max-width: 767.98px) {
    .grade_valor_valid_v2 {
        grid-template-columns: 1fr;
    }

    .input_valor_valid_v2 {
        max-width: none;
    }
}