/* ---------------------------------------------------------------------------
   Estoque / Recebiveis no tema novo — handoff `ESTOQUE_PORTAL.md`.

   Veste o que `layouts/estoque/recebiveis.py` monta e o que
   `callbacks/estoque/callbacks_recebiveis.py` injeta no card do recebivel.

   Nome com o prefixo `tema_` de proposito, como o `tema_simulador_v2.css`: o Dash
   carrega os assets em ordem alfabetica, e `tema_estoque_v2.css` vem depois de
   `custom1.css`, `mobile.css` e `style.css` — e o que permite vencer empates de
   especificidade com eles.

   As cores do handoff ja existem como variaveis em `tema_conteudo_v2.css`, e sao
   elas que entram aqui (`--v-verde-escuro`, `--v-tint`, `--v-borda-tint`...). Duas
   ficam literais porque o handoff pede um tom que o tema nao tem: o `#8A6B1F` do
   texto ambar da pill de parcial e o `#25765D` do hover do botao Buscar.

   Todas as medidas de fonte/padding vem do handoff. O `tabular-nums` nos numeros
   tambem: sem ele os digitos dancam de largura e as colunas do card desalinham.
   --------------------------------------------------------------------------- */

.tela_estoque_v2 {
    font-family: Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* --- card de filtros --------------------------------------------------- */
.filtros_estoque_v2 {
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 16px;
}

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

/* o handoff alinha os campos pelo rodape, para o label nao empurrar a linha */
.linha_filtros_estoque_v2 {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.campo_estoque_v2 .mantine-InputWrapper-label,
.rotulo_campo_estoque_v2 {
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    margin-bottom: 7px;
    display: block;
}

.campo_estoque_v2 input {
    height: 42px;
    width: 220px;
    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;
    padding: 0 12px;
}

.campo_estoque_v2 input:focus {
    border-color: var(--v-verde-escuro);
    outline: none;
}

/* --- segmented control da visao --------------------------------------- */
.visao_estoque_v2 .mantine-SegmentedControl-root {
    background: var(--v-tab-cabecalho);
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    padding: 3px;
}

.visao_estoque_v2 .mantine-SegmentedControl-indicator {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(10, 30, 24, .12);
}

.visao_estoque_v2 .mantine-SegmentedControl-label {
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    padding: 8px 18px;
}

.visao_estoque_v2 .mantine-SegmentedControl-label[data-active] {
    font-weight: 800;
    color: var(--v-verde-escuro);
}

/* --- botao buscar ------------------------------------------------------ */
.btn_estoque_v2 {
    height: 42px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: var(--v-verde-escuro);
    color: #fff;
    font: 800 13.5px Manrope, sans-serif;
}

.btn_estoque_v2:hover:not(:disabled) {
    background: #25765D;
}

/* --- linha de resultado: titulo + pills -------------------------------- */
.resultado_estoque_v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
}

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

.pill_estoque_v2 {
    font: 700 11.5px Manrope, sans-serif;
    border-radius: 14px;
    padding: 4px 11px;
    white-space: nowrap;
}

.pill_verde_estoque_v2 {
    color: var(--v-verde-escuro);
    background: var(--v-tint);
    border: 1px solid var(--v-borda-tint);
}

.pill_neutra_estoque_v2 {
    color: var(--v-texto-inativo);
    background: var(--v-tab-cabecalho);
    border: 1px solid var(--v-tab-divisoria);
}

/* o ambar da pill de parcial: o tema tem o fundo e a borda, nao o texto */
.pill_ambar_estoque_v2 {
    color: #8A6B1F;
    background: var(--v-aviso-fundo);
    border: 1px solid var(--v-aviso-borda);
}

/* --- card do recebivel ------------------------------------------------- */
.card_recebivel_v2 {
    border: 1px solid var(--v-borda-clara);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.grid_partes_v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--v-tab-divisoria);
}

.parte_v2 {
    padding: 18px 22px;
    border-right: 1px solid var(--v-tab-divisoria);
    min-width: 0;
}

/* a ultima coluna nao leva divisoria — no mobile, quem fecha a linha muda */
.parte_v2:last-child {
    border-right: 0;
}

.rotulo_parte_v2 {
    font: 700 11px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    letter-spacing: .5px;
}

.nome_parte_v2 {
    font: 700 13.5px Manrope, sans-serif;
    color: var(--v-tab-texto);
    margin-top: 5px;
}

.doc_parte_v2 {
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* --- faixa de rodape do card ------------------------------------------ */
.rodape_recebivel_v2 {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px 22px;
    background: var(--v-tab-hover);
}

.rodape_recebivel_v2 > div {
    min-width: 0;
}

.valor_rodape_v2 {
    font: 800 14px Manrope, sans-serif;
    color: var(--v-tab-texto);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

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

.lastro_rodape_v2 {
    font: 600 12.5px Manrope, sans-serif;
    color: var(--v-texto-inativo);
    margin-top: 4px;
    word-break: break-all;
}

.status_rodape_v2 {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Mobile. O card do handoff e desenhado para 4 colunas; abaixo de 768px elas
   nao cabem sem quebrar o nome do cedente em cinco linhas.

   As divisorias trocam de eixo junto com o grid: em duas colunas quem separa
   e a borda direita das impares e a de baixo de todas menos as duas ultimas;
   em uma coluna, so a de baixo. Sem isso sobram tracos soltos no meio do card.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .grid_partes_v2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .parte_v2 {
        border-right: 1px solid var(--v-tab-divisoria);
        border-bottom: 1px solid var(--v-tab-divisoria);
    }

    .parte_v2:nth-child(2n) {
        border-right: 0;
    }

    .parte_v2:nth-last-child(-n+2) {
        border-bottom: 0;
    }
}

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

    .parte_v2 {
        border-right: 0;
        padding: 14px 16px;
    }

    .parte_v2:last-child {
        border-bottom: 0;
    }

    .filtros_estoque_v2 {
        padding: 14px 16px;
    }

    /* o input de 220px estoura a tela estreita; o campo passa a ocupar a linha */
    .linha_filtros_estoque_v2,
    .campo_estoque_v2,
    .campo_estoque_v2 input,
    .visao_estoque_v2,
    .btn_estoque_v2 {
        width: 100%;
    }

    .visao_estoque_v2 .mantine-SegmentedControl-root {
        width: 100%;
    }

    .rodape_recebivel_v2 {
        gap: 16px;
        padding: 14px 16px;
    }

    /* em coluna, cada item do rodape ocupa a largura toda */
    .rodape_recebivel_v2 > div {
        width: 100%;
    }

    .titulo_resultado_estoque_v2 {
        font-size: 15px;
    }
}

/* --- grupo do PDF ------------------------------------------------------
   O botao de gerar e o link do S3 dividem a mesma coluna da linha de
   filtros; `[hidden]` explicito porque a regra abaixo transforma o bloco em
   flex, e `display` vence o `[hidden]` que o navegador aplica sozinho. */
.grupo_pdf_estoque_v2 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.grupo_pdf_estoque_v2[hidden] {
    display: none;
}

/* o gerar e a acao secundaria da tela: mesma altura do Buscar, sem o peso
   do verde cheio */
.btn_pdf_estoque_v2 {
    background: #fff;
    color: var(--v-verde-escuro);
    border: 1px solid var(--v-borda-tint);
}

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

@media (max-width: 575.98px) {
    .grupo_pdf_estoque_v2 {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- consulta de operacao pelo ticket ----------------------------------
   A tela de operacoes (`layouts/estoque/operacoes.py`) veste as mesmas
   classes da de recebiveis. Só três coisas mudam de largura ou de eixo, e
   são estas. */

/* o ticket e um uuid de 36 caracteres; nos 220px do campo padrao ele nao
   cabe inteiro, e conferir ticket cortado nao serve para nada */
.campo_ticket_estoque_v2 {
    width: 340px !important;
}

/* a chave do detalhe e o Buscar vao numa linha propria, abaixo dos campos:
   nenhum dos dois e filtro, e na linha dos campos eles herdavam o
   `align-items: flex-end` que existe para os labels dos inputs */
.acoes_filtros_estoque_v2 {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* O card da operacao tem seis colunas: fundo, tipo e cedente na frente das
   tres do andamento (status, termo, atingimento). A criacao desceu para o
   rodape quando o cedente entrou — e uma data, e o rodape ja e a faixa de
   datas e valores.

   As larguras nao sao iguais de proposito: o atingimento e o cedente sao os
   dois que carregam texto longo (a frase do atingimento e a razao social), e
   o tipo e uma palavra so. */
.grid_operacao_v2 {
    grid-template-columns: .85fr .55fr 1.3fr .9fr .8fr 1.6fr;
}

/* o link do termo assinado, sob o status na celula do TERMO. Herda o tamanho
   do `.doc_parte_v2` que o envolve — e um subtexto da celula, nao um botao —
   e ganha o verde e o icone para se ler como acao. */
.link_termo_v2 {
    color: var(--v-verde-escuro);
    font: 600 12px Manrope, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.link_termo_v2:hover {
    color: #25765D;
    text-decoration: underline;
}

/* o "(+3)" que abre o modal com todos os cedentes */
.link_partes_v2 {
    cursor: pointer;
}

.mais_partes_v2 {
    color: var(--v-verde-escuro);
    text-decoration: underline;
    white-space: nowrap;
}

.link_partes_v2:hover .mais_partes_v2 {
    color: #25765D;
}

/* as duas primeiras celulas respondem "estou olhando o que?", e vieram das
   pills — o tint verde e o que mantem o peso que a pill dava, agora dentro
   do card */
.parte_destaque_v2 {
    background: var(--v-tint);
}

.parte_destaque_v2 .rotulo_parte_v2,
.parte_destaque_v2 .nome_parte_v2 {
    color: var(--v-verde-escuro);
}

.parte_destaque_v2 .nome_parte_v2 {
    font-size: 15px;
}

/* Estas duas repetem o que as regras de mobile la de cima ja fazem com
   `.grid_partes_v2`. Precisam existir: as duas selecionam por uma classe so,
   entao empatam em especificidade, e neste arquivo quem vem depois vence —
   sem repetir aqui, o `.grid_operacao_v2` acima manteria as seis colunas
   dentro das media queries. */
@media (max-width: 991.98px) {
    .grid_operacao_v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (max-width: 575.98px) {
    .campo_ticket_estoque_v2 {
        width: 100% !important;
    }
}

/* a checklist de recorte que fica em cima da tabela de UR — rotulo em cima,
   chips embaixo, com respiro em relacao a tabela */
.agrupar_ur_estoque_v2 {
    margin-bottom: 14px;
}

.agrupar_ur_estoque_v2 .rotulo_campo_estoque_v2 {
    margin-bottom: 8px;
}

/* --- abas internas -----------------------------------------------------
   Desde que o `gen_inner_tabs_layout` (`utils/general.py`) passou a montar as
   sub-abas como chips (`pill=True`, o default), a tipografia delas vem do
   `.faixa_subabas_v2` em `tema_conteudo_v2.css`: 13px Manrope. O que sobra aqui
   e o meio-ponto de diferenca — 13.5px e o corpo do botao Buscar, a outra
   tipografia forte da tela, e e nele que as abas se alinham.

   O `!important` e heranca do `pill=False`, onde o helper ainda fixa
   `styles={'tab': {'font-size': 'medium'}}` no `dmc.Tabs`: aquilo entra como
   atributo `style` no elemento, e estilo inline so cai com `!important` de folha
   de estilo. Fica, para o dia em que esta tela precisar voltar ao formato antigo.

   O ajuste e escopado em `.tela_estoque_v2` de proposito: o helper e de todo o
   portal, e mudar o tamanho la dentro mexeria em toda tela que tem sub-abas. */
.tela_estoque_v2 .mantine-Tabs-tab {
    font-size: 13.5px !important;
    font-family: Manrope, sans-serif;
    letter-spacing: .2px;
}