/* ---------------------------------------------------------------------------
   Solicitacoes / Antecipacoes ADM — handoff `SOLICITACOES_PORTAL.md`.

   Cobre a coluna de filtros, o alerta de atingimentos, o cartao de remessas, o Resumo e
   o indicador de atingimento dentro da tabela. A tabela em si continua vindo do
   `html_table` com a tipografia de `tema_conteudo_v2.css`.

   Monta em `gen_solicitacoes_layout` (`layouts/erp/antecipacoes.py`) e nos callbacks
   `load_warnings_antecipacao` / `load_div_sol_antecip`
   (`callbacks/erp/callbacks_antecipacoes.py`).

   Os tokens sao os `--v-*` de `tema_conteudo_v2.css`. O callout ambar reusa
   `cartao_indisp_v2` / `corpo_aviso_v2` / `fechar_aviso_v2`, que ja existiam — aqui so
   entram as pecas que o handoff acrescenta (titulo, badge e botao).
   --------------------------------------------------------------------------- */

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

/* Cartao, como os outros blocos da tela — e nao a coluna solta do handoff. A borda a
   direita e a sombra pesada do `filter_column` (`mobile.css`) saem: aquela moldura era de
   outra epoca do portal e nao conversa com os cartoes ao lado.

   `.filtros_solic_v2.filter_column` para vencer o `div.filter_column` de la, que tambem
   crava `padding-top: 0`. */
.filtros_solic_v2.filter_column {
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    box-shadow: none;
    background: #fff;
    padding: 18px;
    align-self: flex-start;
}

/* Os rotulos continuam vindo da prop `label` do Mantine — sao ~7 campos com ids ja
   ligados a callbacks, e mover cada um para um `<div>` proprio seria mexer em muita
   coisa por tipografia. Aqui a folha alcanca todos de uma vez. */
.filtros_solic_v2 .mantine-InputWrapper-label {
    margin-bottom: 8px;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.filtros_solic_v2 .mantine-InputWrapper-description {
    margin-bottom: 6px;
    font: 500 11.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

.filtros_solic_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_solic_v2 .mantine-Input-input:focus,
.filtros_solic_v2 .mantine-Input-input:focus-within {
    border-color: var(--v-verde-escuro);
}

/* 17px e radius 5, do handoff. O Mantine dimensiona a caixa e o desenho do check pelo
   mesmo `--checkbox-size`, entao mexer so no `width` deixaria o traco fora de escala. */
.filtros_solic_v2 .mantine-Checkbox-input {
    --checkbox-size: 17px;
    --checkbox-radius: 5px;
    border-width: 1.5px;
    border-color: var(--v-borda-controle);
}

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

.filtros_solic_v2 .mantine-Checkbox-root:has(.mantine-Checkbox-input:not(:checked)) .mantine-Checkbox-label {
    color: var(--v-texto-inativo);
}

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

/* ============================================================ ALERTA */

/* Linha 1 do callout: nome do grupo e, ao lado, quantos itens ele tem. */
.linha_titulo_alerta_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.titulo_alerta_v2 {
    margin: 0;
    font: 800 13.5px Manrope, sans-serif;
    color: var(--v-aviso-forte);
}

.badge_alerta_v2 {
    padding: 3px 9px;
    border-radius: 14px;
    background: #F5E6C4;
    font: 700 11px Manrope, sans-serif;
    color: var(--v-aviso-forte);
}

.texto_alerta_v2 {
    margin-top: 4px;
    font: 500 13px/1.6 Manrope, sans-serif;
    color: var(--v-aviso-texto);
}

.texto_alerta_v2 b {
    color: var(--v-aviso-forte);
}

/* Contorno ambar, e nao o verde do tema: o botao pertence ao callout e herda a cor dele.
   Verde aqui competiria com o "Consultar remessas" logo abaixo, que e a acao principal
   da tela. */
.btn_alerta_v2.btn,
.btn_alerta_v2.mantine-Button-root {
    height: 36px;
    padding: 0 16px;
    border: 1.5px solid var(--v-aviso-icone);
    border-radius: 10px;
    background: transparent;
    font: 700 12.5px Manrope, sans-serif;
    color: #8A6B1F;
}

.btn_alerta_v2.btn:hover,
.btn_alerta_v2.btn:focus,
.btn_alerta_v2.mantine-Button-root:hover {
    border-color: var(--v-aviso-icone);
    background: #F5E6C4;
    color: var(--v-aviso-forte);
}

/* Cada grupo de aviso (automatica, atingimentos, transferencias) e um bloco; a divisoria
   entre eles vem do `<hr>` que o callback ja insere. */
.grupo_alerta_v2 + .grupo_alerta_v2 {
    margin-top: 14px;
}

/* ============================================================ REMESSAS */

.cartao_remessas_v2.mantine-Card-root {
    padding: 16px 22px;
    border-color: var(--v-borda-clara);
    border-radius: 10px;
}

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

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

/* No Historico o "RESUMO" divide a linha com o periodo exibido, e a folga vem do
   `cabecalho_resumo_v2`. Aqui ele esta sozinho, como filho direto do cartao — o `>` e o
   que impede esta regra de alcancar o outro. */
.cartao_resumo_v2 > .titulo_resumo_v2 {
    margin-bottom: 14px;
}

/* ============================================================ ATINGIMENTO (tabela) */

/* Sem pill, ao contrario dos status do Resumo: aqui e uma marca de estado dentro de uma
   celula que ja tem o status em cima. Uma caixa em volta somaria peso a uma informacao
   secundaria. */
.linha_html_table .ating_v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font: 700 11px Manrope, sans-serif;
}

.linha_html_table .ating_v2 .icone_check_tabela {
    width: 11px;
    height: 11px;
}

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

.linha_html_table .ating_alerta_v2 {
    color: #8A6B1F;
}

.linha_html_table .ating_erro_v2 {
    color: #C4553F;
}