/* ---------------------------------------------------------------------------
   Consultar Extrato — handoff `consultar_extrato` (tema verde claro).

   Monta em `consulta_cc_layout` (`layouts/layout_conta_corrente.py`) e no
   `resultado_extrato_v2` (`callbacks/cc/callbacks_cc_common.py`). Os rotulos dos campos
   vem do `campo_estoque_v2` e os botoes do `btn_acoes_v2`; aqui so o que a tela pede a
   mais: o painel cinza dos filtros, os chips de Tipo, o cartao de Movimentos com as
   celulas em HTML e os dois cartoes de label/valor.
   --------------------------------------------------------------------------- */

.tela_consulta_extrato_v2 {
    /* tons do handoff que nao tem token no tema */
    --ce-texto-meta: #93A6A0;
    --ce-erro-texto: #7A3A2C;
}

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

.painel_filtros_extrato_v2 {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 22px;
    margin-bottom: 14px;
    background: var(--v-tab-hover);
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
}

/* `.mantine-Input-input` e nao `input`: o DatePickerInput desenha um `button`, e a regra
   `input` do `campo_estoque_v2` nao o alcanca. */
.painel_filtros_extrato_v2 .campo_estoque_v2 .mantine-Input-input {
    height: 42px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--v-borda-input);
    background: #fff;
    color: var(--v-tab-texto);
    font: 600 13px Manrope, sans-serif;
}

.painel_filtros_extrato_v2 .campo_estoque_v2 .mantine-Input-input:focus,
.painel_filtros_extrato_v2 .campo_estoque_v2 .mantine-Input-input[data-expanded] {
    border-color: var(--v-verde-escuro);
}

.painel_filtros_extrato_v2 .campo_estoque_v2 .mantine-Input-input::placeholder {
    color: var(--ce-texto-meta);
}

.painel_filtros_extrato_v2 .campo_id_extrato_v2 .mantine-Input-input {
    width: 120px;
}

.painel_filtros_extrato_v2 .campo_conta_extrato_v2 .mantine-Input-input {
    width: 160px;
}

.painel_filtros_extrato_v2 .campo_periodo_extrato_v2 .mantine-Input-input {
    width: 240px;
}

/* --- chips de Tipo ----------------------------------------------------- */
.grupo_chips_extrato_v2 .mantine-Group-root {
    gap: 6px;
}

.tela_consulta_extrato_v2 .chip_tipo_extrato_v2 .mantine-Chip-label {
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--v-borda-input);
    background: #fff;
    color: var(--v-texto-inativo);
    font: 700 13px Manrope, sans-serif;
}

.tela_consulta_extrato_v2 .chip_tipo_extrato_v2 .mantine-Chip-label:hover {
    border-color: var(--v-verde-escuro);
}

.tela_consulta_extrato_v2 .chip_tipo_extrato_v2 .mantine-Chip-label[data-checked] {
    background: var(--v-tint);
    border-color: var(--v-borda-tint);
    color: var(--v-verde-escuro);
}

.tela_consulta_extrato_v2 .chip_tipo_extrato_v2 .mantine-Chip-iconWrapper,
.tela_consulta_extrato_v2 .chip_tipo_extrato_v2 .mantine-Chip-checkIcon {
    width: 12px;
    height: 12px;
    color: var(--v-verde-escuro);
}

.tela_consulta_extrato_v2 .chip_tipo_extrato_v2 .mantine-Chip-iconWrapper {
    margin-right: 7px;
}

/* --- botoes ------------------------------------------------------------ */
.tela_consulta_extrato_v2 .btn_forcar_extrato_v2.mantine-Button-root,
.tela_consulta_extrato_v2 .btn_baixar_extrato_v2.mantine-Button-root {
    border-color: var(--v-borda-tint);
    background: #fff;
    color: var(--v-verde-escuro);
    font-size: 13px;
    padding: 0 16px;
}

.tela_consulta_extrato_v2 .btn_forcar_extrato_v2.mantine-Button-root:hover,
.tela_consulta_extrato_v2 .btn_baixar_extrato_v2.mantine-Button-root:hover {
    background: var(--v-tint);
}

.tela_consulta_extrato_v2 .btn_forcar_extrato_v2.mantine-Button-root {
    margin-left: auto;
}

.tela_consulta_extrato_v2 .btn_baixar_extrato_v2.mantine-Button-root {
    height: 36px;
    padding: 0 14px;
}

/* ============================================================ MOVIMENTOS */

.resultado_extrato_v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cartao_mov_extrato_v2 {
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

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

.titulo_mov_extrato_v2,
.acoes_mov_extrato_v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acoes_mov_extrato_v2 {
    gap: 10px;
}

.meta_mov_extrato_v2 {
    font: 500 12px Manrope, sans-serif;
    color: var(--ce-texto-meta);
}

.busca_extrato_v2 .mantine-Input-input {
    height: 36px;
    min-height: 36px;
    width: 220px;
    border-radius: 10px;
    border: 1px solid var(--v-borda-input);
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

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

.busca_extrato_v2 .mantine-Input-input::placeholder {
    color: var(--ce-texto-meta);
}

.busca_extrato_v2 .mantine-Input-section {
    color: var(--v-tab-texto-sub);
}

.tabela_mov_extrato_v2 {
    overflow-x: auto;
}

.vazio_mov_extrato_v2 {
    padding: 0 22px 18px;
}

/* --- celulas em HTML --------------------------------------------------- */
.tipo_extrato_v2 {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid;
    font: 800 11.5px Manrope, sans-serif;
}

.tipo_c_extrato_v2 {
    background: var(--v-tint);
    border-color: var(--v-borda-tint);
    color: var(--v-verde-escuro);
}

.tipo_d_extrato_v2 {
    background: var(--v-destrutivo-tint);
    border-color: var(--v-destrutivo-borda);
    color: var(--v-destrutivo);
}

.valor_extrato_v2 {
    font-weight: 800;
    white-space: nowrap;
}

.valor_c_extrato_v2 {
    color: var(--v-verde-escuro);
}

.valor_d_extrato_v2 {
    color: var(--v-destrutivo);
}

.forte_extrato_v2 {
    display: block;
    font-weight: 700;
}

.linha_extrato_v2 {
    display: block;
}

.sub_extrato_v2 {
    display: block;
    margin-top: 2px;
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.baixado_extrato_v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 50%;
    vertical-align: middle;
}

.baixado_sim_extrato_v2 {
    background: var(--v-tint);
    color: var(--v-verde-escuro);
    font: 800 12px Manrope, sans-serif;
}

.baixado_nao_extrato_v2 {
    border: 1.5px solid var(--v-tab-divisoria);
}

.baixado_nao_extrato_v2::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v-borda-input);
}

/* ============================================================ DADOS / COLETA */

.grade_conta_extrato_v2 {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 14px;
}

.cartao_info_extrato_v2 {
    min-width: 0;
    padding: 18px 22px;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    background: #fff;
}

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

.itens_info_extrato_v2 {
    display: grid;
    gap: 14px 18px;
}

.itens_3_extrato_v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.itens_2_extrato_v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.valor_item_extrato_v2 {
    margin-top: 3px;
    font: 800 15px Manrope, sans-serif;
    color: var(--v-tab-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.valor_erro_extrato_v2 {
    color: var(--v-destrutivo);
}

.pill_ponto_extrato_v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ponto_pill_extrato_v2 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pill_erro_extrato_v2 {
    color: var(--v-destrutivo);
    background: var(--v-destrutivo-tint);
    border: 1px solid var(--v-destrutivo-borda);
}

.erro_coleta_extrato_v2 {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--v-destrutivo-tint);
    border: 1px solid var(--v-destrutivo-borda);
    border-radius: 10px;
    font: 600 12.5px/1.5 Manrope, sans-serif;
    color: var(--ce-erro-texto);
}

/* No estreito os dois cartoes empilham e o Forcar download desce para a propria linha. */
@media (max-width: 991.98px) {
    .grade_conta_extrato_v2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .painel_filtros_extrato_v2 {
        padding: 16px;
    }

    .tela_consulta_extrato_v2 .btn_forcar_extrato_v2.mantine-Button-root {
        margin-left: 0;
    }

    .itens_3_extrato_v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .busca_extrato_v2 .mantine-Input-input {
        width: 100%;
    }
}