/* grade-telas — Clareira (ver ux-2026-10/02-design). Folha própria para não disputar o layout.

   A GRADE NAS OUTRAS LISTAS (UX-GRADE): títulos, conciliação e cadastros.

   A base é a `.grade-fin` de Lançamentos, que mora no layout: célula com
   altura de densidade, valor tabular à direita, ações acesas no foco e os dois
   andares no celular. Esta folha só acrescenta o que estas três telas têm e
   Lançamentos não tem — cabeçalho visível, linha de grupo, caixa de seleção.

   ⚠️ AS LARGURAS VÊM DO `<colgroup>`. Com `table-layout: fixed` o navegador
   mede as colunas pela PRIMEIRA linha; nos títulos ela é a linha do título,
   com outra forma que a da parcela, e as colunas sairiam tortas. A coluna
   principal fica sem largura e leva o que sobra.

   ⚠️ TODO SELETOR AQUI COMEÇA POR `.grade-fin.grade-…`, e não por
   `.grade-…` sozinho. Esta folha carrega ANTES do `<style>` do layout: em
   empate de especificidade, a `.grade-fin .col-descricao` de lá ganhava, e a
   foto a 390 px mostrou o título espremido em 38% da própria coluna. */

.grade-fin.grade-tela {
    margin-top: 0.6rem;
}

/* --- o cabeçalho -------------------------------------------------------
   Lançamentos esconde o cabeçalho porque o dia já organiza a lista. Aqui não
   há dia: sem cabeçalho, "11.222.333/0001-81" e "2026" são só números soltos.
   Pequeno e suave, para não disputar com o dado. */
.grade-fin.grade-tela .grade-cabeca th {
    padding: 0.35rem 1rem;
    border-bottom: 1px solid var(--zen-border);
    color: var(--zen-text-soft);
    font-size: var(--fs-pequeno);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grade-fin.grade-tela .grade-cabeca th.col-valor {
    text-align: right;
}

/* `th` de linha (o título que encabeça as parcelas) tem a forma de célula:
   a `.grade-fin` só desenha `td`, e o `th` cru vinha centrado e sem borda. */
.grade-fin.grade-tela tbody th {
    padding: var(--esp-celula);
    height: var(--altura-linha);
    border-bottom: 1px solid var(--zen-border);
    vertical-align: middle;
    text-align: left;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grade-fin.grade-tela tbody tr:hover th,
.grade-fin.grade-tela tbody tr:focus-within th {
    background: var(--zen-surface-2);
}

/* A `.grade-fin` dá largura a `.col-descricao` (38%); com `colgroup` quem
   decide é a coluna, e a célula não pode puxar para o outro lado. */
.grade-fin.grade-tela .col-descricao {
    width: auto;
}

/* --- larguras ----------------------------------------------------------- */
.grade-fin.grade-tela .gc-marca {
    width: 2.75rem;
}

.grade-fin.grade-tela .gc-data {
    width: 7.5rem;
}

.grade-fin.grade-tela .gc-periodo {
    width: 14rem;
}

.grade-fin.grade-tela .gc-conta {
    width: 18%;
}

.grade-fin.grade-tela .gc-valor {
    width: 10rem;
}

.grade-fin.grade-tela .gc-situacao {
    width: 12rem;
}

.grade-fin.grade-tela .gc-papel {
    width: 10rem;
}

/* 12rem, e não 11: o CNPJ com máscara pede ~150 px de texto e a coluna de
   176 menos o respiro deixava "11.222.333/0001-…" (auditoria de 24/10). */
.grade-fin.grade-tela .gc-documento {
    width: 12rem;
}

.grade-fin.grade-tela .gc-contato {
    width: 20%;
}

/* 14rem, e não 13: "Dar baixa" + "Cobrar por e-mail" nas parcelas pedem 217 px
   e a coluna de 208 deixava o segundo botão vazar a borda (foto de 20/10). */
.grade-fin.grade-tela .gc-acoes {
    width: 14rem;
}

.grade-fin.grade-tela .gc-acoes-curta {
    width: 7.5rem;
}

.grade-fin.grade-tela .col-acoes {
    white-space: nowrap;
}

.grade-vazio {
    color: var(--zen-text-soft);
}

/* --- títulos: o título encabeça, as parcelas seguem ----------------------
   A `.grade-fin` tira a borda da última linha de cada `<tbody>`; aqui cada
   título é um `<tbody>`, e o que separa um título do outro é a borda de CIMA
   da linha do título. */
.grade-fin.grade-titulos .titulo-linha > * {
    border-top: 1px solid var(--zen-border);
}

.grade-fin.grade-titulos tbody:first-of-type .titulo-linha > * {
    border-top: 0;
}

.grade-fin.grade-titulos .titulo-linha .lancamento-descricao {
    font-weight: 600;
}

.grade-fin.grade-titulos .titulo-linha .lancamento-categoria .etiqueta {
    margin-right: 0.35rem;
}

/* A parcela entra recuada, abaixo do título a que pertence, em tom suave: o
   olho lê "1/7" como subordinado, sem precisar de outra moldura. */
.grade-fin.grade-titulos .col-parcela {
    padding-left: 2rem;
    color: var(--zen-text-soft);
}

.grade-fin.grade-titulos .parcela-linha .col-valor {
    font-weight: 500;
}

.grade-fin.grade-titulos .col-situacao .quitado {
    margin-left: 0.4rem;
    color: var(--zen-text-soft);
    font-size: var(--fs-pequeno);
}

.grade-fin.grade-titulos .col-situacao .etiqueta {
    white-space: nowrap;
}

/* A composição da baixa ocupa a largura toda, e por isso PODE quebrar linha:
   juros, multa, desconto e quanto abateu não cabem numa célula de situação. */
.grade-fin.grade-titulos .parcela-composicao td {
    height: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    padding-left: 2rem;
    white-space: normal;
    color: var(--zen-text-soft);
}

.grade-fin.grade-titulos .parcela-composicao .composicao {
    display: block;
    font-variant-numeric: tabular-nums;
}

/* Quando há composição, ela e a parcela são uma coisa só: a borda entre as
   duas separaria o que se lê junto. */
.grade-fin.grade-titulos .parcela-linha:has(+ .parcela-composicao) td {
    border-bottom: 0;
}

/* --- conciliação: a caixa, e a linha escolhida ------------------------- */
/* A caixa não cabe no respiro de 1rem dos dois lados: a célula cortava o
   que sobrava e desenhava as reticências ao lado dela (foto de 04/10). */
.grade-fin.grade-selecao td.col-marca {
    padding-left: 0.75rem;
    padding-right: 0;
    text-overflow: clip;
}

.grade-fin.grade-selecao .col-marca input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--zen-primary);
    cursor: pointer;
}

/* O rótulo ocupa a célula: clicar na descrição marca a caixa, como fazia o
   `.opcao`. O `label` do formulário é bloco com margem — aqui não. */
.grade-fin.grade-selecao .col-descricao label {
    display: block;
    margin: 0;
    font-size: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* A linha escolhida se vê de longe, sem estado novo no servidor: o `:has`
   lê a mesma caixa que o `wire:model` marca. */
.grade-fin.grade-selecao tbody tr:has(input:checked) td {
    background: var(--zen-accent-soft);
}

/* Ignorada: fora da soma, mas à vista — esmaecida, e com a etiqueta escrita. */
.grade-fin.grade-selecao .linha-ignorada .col-descricao,
.grade-fin.grade-selecao .linha-ignorada .col-data,
.grade-fin.grade-selecao .linha-ignorada .col-valor {
    opacity: 0.6;
}

.grade-fin.grade-selecao .linha-ignorada .etiqueta {
    margin-left: 0.4rem;
}

/* --- cadastros ------------------------------------------------------------ */
.grade-fin.grade-partes .col-descricao .situacao {
    margin-left: 0.4rem;
}

.grade-fin.grade-partes .parte-inativa .lancamento-descricao {
    color: var(--zen-text-soft);
}

.grade-fin.grade-partes .col-documento {
    color: var(--zen-text-soft);
    /* Documento é dado que se CONFERE inteiro: a 1400 px o CNPJ saía
       "11.222.333/0001-…" e as datas do RH "Admissão – desliga…" (24/10).
       Quebra em vez de reticências; o contato continua com reticências, e o
       valor inteiro vai no `title`. */
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: break-word;
}

.grade-fin.grade-partes .col-contato .grade-vazio {
    white-space: normal;
}

.grade-fin.grade-partes .col-contato .lancamento-descricao,
.grade-fin.grade-partes .col-contato .lancamento-categoria {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grade-fin.grade-partes .col-contato .lancamento-categoria {
    color: var(--zen-text-soft);
    font-size: var(--fs-pequeno);
}

/* Uma cor por papel. "Cliente e fornecedor" é a sálvia, e não a cor de um dos
   dois — o ternário antigo dava a ele a de fornecedor. */
.etiqueta-papel {
    border-color: transparent;
}

.etiqueta-papel-receita {
    background: var(--zen-receita-bg);
    color: var(--zen-receita);
}

.etiqueta-papel-despesa {
    background: var(--zen-despesa-bg);
    color: var(--zen-despesa);
}

.etiqueta-papel-ambos {
    background: var(--zen-accent-soft);
    color: var(--zen-primary);
}

/* --- estreito: sem rolagem horizontal ------------------------------------
   A `.grade-fin` já empilha a linha em dois andares (descrição e valor em
   cima, o resto embaixo). Aqui entram as peças que ela não conhece. */
@media (max-width: 760px) {
    /* O cabeçalho vira só de leitor de tela: no celular cada linha é um
       cartãozinho, e o rótulo de coluna em cima de nada só ocupa altura. */
    .grade-fin.grade-tela .grade-cabeca {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .grade-fin.grade-tela colgroup {
        display: none;
    }

    .grade-fin.grade-tela tbody tr > th[class] {
        display: block;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .grade-fin.grade-tela .col-acoes {
        white-space: normal;
    }

    /* Títulos: a linha do título é descrição e total; a etiqueta e o
       "Editar" descem. A coluna de data do título é vazia, e some. */
    .grade-fin.grade-titulos tbody {
        border-top: 1px solid var(--zen-border);
    }

    .grade-fin.grade-titulos tbody:first-of-type {
        border-top: 0;
    }

    .grade-fin.grade-titulos .titulo-linha > * {
        border-top: 0;
    }

    .grade-fin.grade-titulos .titulo-linha .col-data {
        display: none;
    }

    .grade-fin.grade-titulos .titulo-linha .celula-vazia {
        display: none;
    }

    /* A parcela: número e valor em cima; vencimento e situação embaixo, o
       selo à direita. Os três na mesma linha não cabiam a 390 px — a foto
       mostrou a data cortada em "29/12/20…". */
    .grade-fin.grade-titulos .parcela-linha {
        padding-left: 1rem;
    }

    .grade-fin.grade-titulos .parcela-linha > td.col-parcela {
        grid-column: 1;
        grid-row: 1;
        padding: 0;
    }

    .grade-fin.grade-titulos .parcela-linha .col-valor {
        grid-column: 2;
        grid-row: 1;
    }

    .grade-fin.grade-titulos .parcela-linha .col-data {
        grid-column: 1;
        grid-row: 2;
    }

    .grade-fin.grade-titulos .parcela-linha .col-situacao {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .grade-fin.grade-titulos .parcela-linha .col-acoes {
        grid-row: 3;
    }

    /* A composição é uma linha de texto só: bloco, e não a grade de duas
       colunas da `.grade-fin`, que a jogava para a coluna do valor. */
    .grade-fin.grade-titulos .parcela-composicao {
        display: block;
        padding: 0 0 var(--esp-2) 1rem;
    }

    .grade-fin.grade-titulos .parcela-linha:has(+ .parcela-composicao) {
        border-bottom: 0;
    }

    .grade-fin.grade-titulos .parcela-composicao > td.col-composicao {
        grid-column: 1 / -1;
        padding: 0;
        font-size: var(--fs-pequeno);
    }

    /* Conciliação: a caixa à esquerda, alta como a linha; descrição e valor
       em cima, a data embaixo. */
    .grade-fin.grade-selecao tr {
        grid-template-columns: auto 1fr auto;
    }

    .grade-fin.grade-selecao .col-marca {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        padding-top: 0.15rem;
    }

    /* No celular a linha escolhida pinta a LINHA, e não as células: entre
       as células da grade há vão, e o fundo saía em retalhos (foto de 04/10). */
    .grade-fin.grade-selecao tbody tr:has(input:checked) {
        background: var(--zen-accent-soft);
    }

    .grade-fin.grade-selecao tbody tr:has(input:checked) td {
        background: transparent;
    }

    .grade-fin.grade-selecao .col-descricao {
        grid-column: 2;
        grid-row: 1;
    }

    .grade-fin.grade-selecao .col-valor {
        grid-column: 3;
        grid-row: 1;
    }

    .grade-fin.grade-selecao .col-data,
    .grade-fin.grade-selecao .col-acoes {
        grid-column: 2 / -1;
    }

    /* Cadastros: nome e papel em cima; documento e contato embaixo. */
    .grade-fin.grade-partes .col-papel {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .grade-fin.grade-partes .col-documento,
    .grade-fin.grade-partes .col-contato {
        grid-column: 1 / -1;
        font-size: var(--fs-pequeno);
    }
}