/* ---------------------------------------------------------------------------
   Conciliacao Vesti (master Antecipacoes) no tema novo — handoff `antecipacao_vesti`.

   Veste `layouts/layout_conciliacao_vesti.py` e o que `callbacks/callbacks_conciliacao_vesti.py`
   monta (faixa de indicadores, cartoes do Detalhe). A faixa das sub-abas e a do portal
   (`faixa_subabas_v2`); o seletor de company e o `filtro_og_disp_v2` de
   `tema_simulador_v2.css`, so ajustado a altura dos campos; as tabelas sao `DataTable`
   com `BDR_TABLE`, cujas cores vem inline do Python.

   Tokens: os `--v-*` de `tema_conteudo_v2.css`. Ficam literais os que o guia nomeia sem
   token: texto mudo `#93A6A0`, rodape de cartao `#FAFCFB`, desabilitado `#EEF2F1` e o
   hover do botao `#25705F`.
   --------------------------------------------------------------------------- */

.aba_vesti_v2 {
    font-family: Manrope, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* rotulo verde em caixa alta: secao, grupo de indicadores, cabecalho de cartao */
.rotulo_vesti_v2 {
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.titulo_secao_vesti_v2 {
    margin-top: 2px;
}

.divisoria_secao_vesti_v2 {
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--v-tab-divisoria);
}

/* --- barra de filtros (guia 4.2) ---------------------------------------- */
.barra_filtros_vesti_v2 {
    background: #fff;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.linha_filtros_vesti_v2 {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

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

.acoes_filtros_vesti_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--v-tab-divisoria);
}

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

.campo_periodo_vesti_v2 { width: 250px; }
.campo_status_vesti_v2 { width: 200px; }
.campo_curto_vesti_v2 { width: 200px; }
.campo_envios_vesti_v2 { width: 360px; }

.campo_uuid_vesti_v2 {
    flex: 1;
    min-width: 220px;
    max-width: 300px;
}

.campo_og_vesti_v2 {
    flex: 1;
    min-width: 240px;
    max-width: 340px;
}

/* input dos campos: TextInput, DatePickerInput, DateTimePicker e Select levam todos a
   `mantine-Input-input` */
.campo_vesti_v2 .mantine-Input-input {
    height: 42px;
    min-height: 42px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    background: #fff;
    color: var(--v-tab-texto);
    font: 600 13px Manrope, sans-serif;
    display: flex;
    align-items: center;
}

.campo_vesti_v2 .mantine-Input-input::placeholder,
.campo_vesti_v2 .mantine-Input-input [data-placeholder] {
    color: #93A6A0;
}

.campo_vesti_v2 .mantine-Input-input:focus,
.campo_vesti_v2 .mantine-Input-input:focus-within,
.campo_vesti_v2 .mantine-Input-input[data-expanded] {
    border-color: var(--v-verde-escuro);
    outline: none;
}

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

/* "Envios entre": dois pickers com data e hora no mesmo campo */
.par_datas_vesti_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.par_datas_vesti_v2 > div {
    flex: 1;
    min-width: 0;
}

.sep_envios_vesti_v2 {
    flex: none;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* --- seletor de company (filtro_og, guia 4.3) --------------------------- */
/* O wrapper do dmc.Popover vem com `width: fit-content` inline; como item flex, o
   `flex: 1` ignora esse width. */
.og_vesti_v2 > div {
    flex: 1;
    min-width: 0;
}

.og_vesti_v2 .alvo_filtro_og_v2 {
    width: 100%;
    height: 42px;
    border-color: var(--v-borda-input);
}

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

.og_vesti_v2 .doc_alvo_filtro_og_v2 {
    font: 500 11px Manrope, sans-serif;
    color: #7A8C86;
}

.limpar_og_vesti_v2 {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 6px;
    color: var(--v-tab-texto-sub);
    cursor: pointer;
}

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

/* --- botoes ------------------------------------------------------------- */
:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.mantine-Button-root[data-variant="filled"]:hover:not(:disabled):not([data-disabled]) {
    background: #25705F;
}

:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.mantine-Button-root[data-variant="outline"] {
    background: #fff;
    border-color: var(--v-borda-tint);
    color: var(--v-verde-escuro);
    padding: 0 14px;
}

:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.mantine-Button-root[data-variant="outline"]:hover:not(:disabled) {
    background: var(--v-tint);
}

:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.btn_neutro_vesti_v2.mantine-Button-root {
    border-color: var(--v-borda-input);
    color: var(--v-texto-inativo);
    padding: 0 16px;
    font-size: 13px;
}

:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.btn_neutro_vesti_v2.mantine-Button-root:hover:not(:disabled) {
    background: #fff;
    border-color: var(--v-verde-escuro);
}

:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.btn_compacto_vesti_v2.mantine-Button-root {
    height: 36px;
    padding: 0 14px;
    font: 800 12.5px Manrope, sans-serif;
}

:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.mantine-Button-root:disabled,
:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.mantine-Button-root[data-disabled] {
    background: #EEF2F1;
    border-color: #EEF2F1;
    color: #93A6A0;
}

/* sem dados, o "Baixar Excel" so esmaece (guia: opacity .5) */
:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.btn_compacto_vesti_v2.mantine-Button-root:disabled,
:is(.tela_vesti_v2, .painel_modal_vesti_v2) .btn_acoes_v2.btn_compacto_vesti_v2.mantine-Button-root[data-disabled] {
    background: #fff;
    border-color: var(--v-borda-tint);
    color: var(--v-verde-escuro);
    opacity: .5;
}

/* --- chip "Habilitar reenvio" ------------------------------------------- */
.chip_reenvio_vesti_v2 .mantine-Chip-label {
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    background: #fff;
    color: var(--v-texto-inativo);
    font: 700 13px Manrope, sans-serif;
    gap: 8px;
}

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

.chip_reenvio_vesti_v2 .mantine-Chip-label[data-checked] {
    padding: 0 14px;
    border-color: var(--v-borda-tint);
    background: var(--v-tint);
    color: var(--v-verde-escuro);
}

.chip_reenvio_vesti_v2 .mantine-Chip-iconWrapper {
    width: 12px;
    max-width: 12px;
    margin: 0;
    color: var(--v-verde-escuro);
}

.chip_reenvio_vesti_v2 .mantine-Chip-checkIcon {
    width: 12px;
    height: 12px;
}

/* --- faixa de indicadores (guia 4.7) ------------------------------------ */
.faixa_ind_vesti_v2 {
    background: #fff;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 18px 22px;
    overflow: hidden;
}

/* o recuo negativo esconde a divisoria e o padding do primeiro grupo de cada linha */
.grupos_ind_vesti_v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 0;
    margin-left: -29px;
}

.grupo_ind_vesti_v2 {
    padding: 0 28px;
    border-left: 1px solid var(--v-tab-divisoria);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

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

.valor_ind_vesti_v2 {
    font: 800 18px Manrope, sans-serif;
    color: var(--v-tab-texto);
    margin-top: 3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

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

/* --- cartao de tabela (guia 4.4) ---------------------------------------- */
.cartao_tabela_vesti_v2 {
    background: #fff;
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    overflow: hidden;
}

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

.titulo_cartao_vesti_v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

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

.acoes_cartao_vesti_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* aviso/erro no topo do cartao, acima da tabela */
.msg_cartao_vesti_v2:not(:empty) {
    padding: 0 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msg_cartao_vesti_v2 .cartao_indisp_v2 {
    padding: 12px 14px;
    font: 600 12.5px Manrope, sans-serif;
    line-height: 1.5;
}

.forte_aviso_vesti_v2 {
    font-weight: 800;
}

/* o estado vazio ja e um cartao; dentro do cartao de tabela perde a moldura */
.cartao_tabela_vesti_v2 .estado_vazio_v2 {
    border: none;
    border-top: 1px solid var(--v-tab-divisoria);
    border-radius: 0;
    padding: 44px 22px;
}

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

.pag_vesti_v2.pagination {
    margin: 0;
    gap: 4px;
}

.pag_vesti_v2 .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v-borda-input);
    border-radius: 8px !important;
    background: #fff;
    color: var(--v-texto-inativo);
    font: 700 12.5px Manrope, sans-serif;
    box-shadow: none;
}

.pag_vesti_v2 .page-item.active .page-link {
    background: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
    color: #fff;
}

/* a paginacao nativa do DataTable (Pedidos, Envios) respira dentro do cartao */
.cartao_tabela_vesti_v2 .previous-next-container {
    padding: 10px 22px 12px;
}

/* --- detalhe do pedido -------------------------------------------------- */
.blocos_det_vesti_v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blocos_det_vesti_v2:empty {
    display: none;
}

.titulo_det_vesti_v2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.id_det_vesti_v2 {
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    word-break: break-all;
}

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

.grade_campos_vesti_v2 {
    padding: 4px 22px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px 24px;
}

.campo_det_vesti_v2 {
    min-width: 0;
}

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

.valor_campo_det_vesti_v2 {
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subsecao_vesti_v2 {
    padding: 14px 22px 12px;
    border-top: 1px solid var(--v-tab-divisoria);
    display: flex;
    align-items: center;
    gap: 10px;
}

.vazio_sub_vesti_v2 .estado_vazio_v2 {
    padding: 24px 22px;
}

/* --- mobile (< 768px) --------------------------------------------------- */
@media (max-width: 768px) {
    .barra_filtros_vesti_v2,
    .faixa_ind_vesti_v2 {
        padding: 14px 16px;
    }

    .linha_filtros_vesti_v2 > *,
    .campo_periodo_vesti_v2,
    .campo_status_vesti_v2,
    .campo_curto_vesti_v2,
    .campo_envios_vesti_v2,
    .campo_uuid_vesti_v2,
    .campo_og_vesti_v2 {
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }

    .linha_filtros_vesti_v2 .btn_acoes_v2,
    .acoes_filtros_vesti_v2 .btn_acoes_v2,
    .acoes_filtros_vesti_v2 .chip_reenvio_vesti_v2,
    .acoes_filtros_vesti_v2 .chip_reenvio_vesti_v2 .mantine-Chip-label {
        width: 100%;
    }

    .acoes_filtros_vesti_v2 .chip_reenvio_vesti_v2 .mantine-Chip-label {
        justify-content: center;
    }

    /* grupos da faixa empilham, sem divisoria */
    .grupos_ind_vesti_v2 {
        flex-direction: column;
        margin-left: 0;
    }

    .grupo_ind_vesti_v2 {
        padding: 0;
        border-left: none;
    }

    .cabecalho_cartao_vesti_v2,
    .rodape_cartao_vesti_v2,
    .subsecao_vesti_v2 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .msg_cartao_vesti_v2:not(:empty) {
        padding: 0 16px 14px;
    }

    .grade_campos_vesti_v2 {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 16px 18px;
    }
}

/* --- modal de colunas do Excel ------------------------------------------ */
.painel_modal_vesti_v2 {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(10, 30, 24, .25);
}

.painel_modal_vesti_v2 .modal-body {
    padding: 26px 28px;
    font-family: Manrope, sans-serif;
}

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

.apoio_modal_vesti_v2 {
    margin-top: 6px;
    font: 500 13px/1.55 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.barra_cols_vesti_v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--v-tab-divisoria);
}

.links_modal_vesti_v2 {
    display: flex;
    gap: 14px;
}

.link_modal_vesti_v2 {
    font: 700 12.5px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    cursor: pointer;
}

.link_modal_vesti_v2:hover {
    text-decoration: underline;
}

.grade_cols_vesti_v2 {
    max-height: 360px;
    overflow-y: auto;
    padding: 2px;
}

.check_col_vesti_v2 .mantine-Checkbox-label {
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.check_col_vesti_v2 .mantine-Checkbox-input:checked {
    background: var(--v-verde-escuro);
    border-color: var(--v-verde-escuro);
}

.rodape_modal_vesti_v2 {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
}