/*
 * As listas de dinheiro no celular, o menu "⋯" e a impressão.
 *
 * Mora aqui só o que estas telas desenham. Cor, espaço, cartão, botão,
 * etiqueta e tabela vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles.
 *
 * O ponto de quebra é o de sempre do celular, 48rem: o mesmo em que a tabela
 * vira ficha e a barra de abas aparece.
 */

/* ---------- o menu "⋯" (`shared/_menu_mais`) ---------- */

/* Por padrão é o menu: um botão de 44px e, aberto, uma lista que cai embaixo
   dele, à direita. No largo (mais abaixo) ele some e os itens ficam soltos. */
.menu-mais { position: relative; display: inline-block; }

.menu-mais__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-forte);
  border-radius: var(--raio);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.menu-mais__botao::-webkit-details-marker { display: none; }
.menu-mais__botao:hover { background: var(--surface-alt); }
.menu-mais__botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.menu-mais[open] > .menu-mais__botao { background: var(--surface-alt); }

.menu-mais__lista {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio-caixa);
  box-shadow: var(--sombra-alta);
}
.menu-mais__lista form { margin: 0; }

@media screen and (max-width: 48rem) {
  .some-no-celular { display: none; }

  /* O item é o que o bloco trouxe — um `botao`, um `link-acao` —, e no menu
     todos têm a mesma cara de linha de 44px. No largo ele guarda a cara que
     tinha. */
  .menu-mais__lista .menu-mais__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem .8rem;
    border: 0;
    border-radius: var(--raio);
    background: none;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }
  .menu-mais__lista .menu-mais__item:hover { background: var(--surface-alt); color: var(--ink); }

  /* Fechado, o conteúdo não existe: nem na tela, nem para o leitor de tela,
     em qualquer navegador (o `<details>` já o esconde, e isto garante). */
  .menu-mais:not([open]) > .menu-mais__lista { display: none; }

  /* O menu do cabeçalho fica à esquerda da linha, e a lista abre para a
     direita dele: aberta para a esquerda, sairia da tela. */
  .pagina__cabecalho .menu-mais { align-self: flex-start; }
  .pagina__cabecalho .menu-mais__lista { left: 0; right: auto; }
  /* `.pagina__cabecalho .acoes-admin .botao` dá 8rem de base aos botões do
     cabeçalho; na lista em coluna isso esticaria cada item. */
  .pagina__cabecalho .acoes-admin .menu-mais__lista .menu-mais__item { flex: 0 0 auto; }
}

/* No largo: o menu some e a lista dele vira os itens soltos, com a cara de
   cada um (`botao`, `link-acao`), como as telas eram. Depende de
   `::details-content`; sem ele (navegador antigo) vale o menu de cima, que
   funciona do mesmo jeito. */
@media screen and (min-width: 48.01rem) {
  @supports selector(::details-content) {
    .menu-mais { display: contents; }
    .menu-mais__botao { display: none; }
    .menu-mais::details-content { content-visibility: visible; display: contents; }
    .menu-mais__lista { display: contents; }
  }
}

/* ---------- lançamentos e extrato: a linha compacta ---------- */
/* A ficha de "rótulo: valor" (application.css, "tabelas viram fichas") gasta
   uns 250px por linha de dinheiro: duas e meia por tela. Aqui a linha é uma
   grade de duas faixas — a descrição e o valor em cima; a data, a categoria e
   a situação embaixo —, com alvo de toque de 44px, e cabem cinco ou mais. */

@media screen and (max-width: 48rem) {
  .tabela--lancamentos tbody tr,
  .tabela--extrato tbody tr {
    display: grid;
    align-items: center;
    column-gap: .5rem;
    row-gap: 0;
    padding: .2rem .7rem .35rem;
  }
  .tabela--lancamentos tbody tr + tr,
  .tabela--extrato tbody tr + tr { margin-top: .35rem; }

  .tabela--lancamentos tbody td,
  .tabela--extrato tbody td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    font-size: .8125rem;
    color: var(--ink-medio);
  }
  /* O rótulo da ficha (`td::before`, de `application.css`) vira, onde fica,
     um prefixo na mesma linha — "doc.", "saldo" —, sem a caixa de tabela. */
  .tabela--lancamentos tbody td::before,
  .tabela--extrato tbody td::before {
    content: none;
    display: inline;
    width: auto;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }

  /* O valor e a descrição são o que se lê; o resto é apoio. */
  .tabela--lancamentos tbody td.numero,
  .tabela--extrato tbody td.numero { text-align: left; white-space: nowrap; }

  /* ---- lançamentos ---- */
  .tabela--lancamentos tbody tr {
    grid-template-columns: 2.75rem auto minmax(8ch, 1fr) auto;
    grid-template-areas:
      "sel desc  desc  valor"
      "sel data  cat   sit";
    /* A descrição tem piso (`minmax(8ch, …)`), e o valor muito longo desce
       para uma faixa própria (`valor--longo`), em vez de espremê-la. */
  }
  /* Sem a caixa (quem só lê), a grade perde a primeira coluna. */
  .tabela--lancamentos tbody tr:not(:has(.coluna-selecao)) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "desc  desc  valor"
      "data  cat   sit";
  }
  .tabela--lancamentos tbody tr:has(.valor--longo) {
    grid-template-areas:
      "sel desc  desc  desc"
      "sel valor valor valor"
      "sel data  cat   sit";
  }
  .tabela--lancamentos tbody tr:not(:has(.coluna-selecao)):has(.valor--longo) {
    grid-template-areas:
      "desc  desc  desc"
      "valor valor valor"
      "data  cat   sit";
  }
  .tabela--lancamentos td.coluna-selecao {
    grid-area: sel;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-left: -.7rem;
  }
  .tabela--lancamentos td.coluna-selecao input { width: 1.5rem; height: 1.5rem; margin: 0; }

  .tabela--lancamentos td[data-rotulo="Descrição"] {
    grid-area: desc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .4rem;
    min-height: 2.75rem;
    font-size: 1rem;
    color: var(--ink);
  }
  /* O alvo de toque: a linha inteira da descrição, 44px de altura. */
  .tabela--lancamentos td[data-rotulo="Descrição"] > a:first-child {
    display: flex;
    align-items: center;
    /* Base de 8ch, e cresce: a etiqueta ao lado ("Fixa", "Transferência") cabe
       na mesma faixa, e é a descrição que encolhe com reticências. */
    flex: 1 1 8ch;
    min-width: 0;
    min-height: 2.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  .tabela--lancamentos td[data-rotulo="Descrição"] .texto-apoio {
    flex: 1 0 100%;
    margin-top: -.55rem;
    font-size: .75rem;
  }
  .tabela--lancamentos td[data-rotulo="Valor"] {
    grid-area: valor;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
  }
  .tabela--lancamentos td[data-rotulo="Data"] { grid-area: data; }
  .tabela--lancamentos td[data-rotulo="Categoria"] {
    grid-area: cat;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabela--lancamentos td[data-rotulo="Categoria"]::before {
    content: "·";
    margin-right: .5rem;
    margin-left: -.1rem;
  }
  .tabela--lancamentos .categoria__raiz {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tabela--lancamentos td[data-rotulo="Categoria"] .etiqueta { display: inline; padding: 0 .4rem; font-size: .6875rem; white-space: nowrap; }
  .tabela--lancamentos td[data-rotulo="Descrição"] .etiqueta { flex: none; padding: 0 .4rem; font-size: .6875rem; }
  .tabela--lancamentos td[data-rotulo="Situação"] { grid-area: sit; text-align: right; white-space: nowrap; }
  /* "Editar" mora na página do lançamento, aonde a descrição leva. */
  .tabela--lancamentos td:not([data-rotulo]):not(.coluna-selecao) { display: none; }

  /* ---- extrato ---- */
  .tabela--extrato tbody tr {
    grid-template-columns: auto auto minmax(0, 1fr) auto 2.75rem;
    grid-template-areas:
      "hist  hist  hist  valor menu"
      "data  doc   conc  saldo menu";
    column-gap: .4rem;
    padding-right: .2rem;
  }
  /* Histórico de banco é longo ("Taxa de notificação por WhatsApp da cobrança
     851521053 NOME DO CLIENTE"): duas linhas bastam para reconhecê-lo, e o
     resto não vale uma ficha de cinco. O alvo de toque da linha é o "⋯". */
  .tabela--extrato td[data-rotulo="Histórico"] {
    grid-area: hist;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-block: .3rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .tabela--extrato td[data-rotulo="Valor"] {
    grid-area: valor;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
  }
  .tabela--extrato td[data-rotulo="Data"] { grid-area: data; }
  .tabela--extrato td[data-rotulo="Documento"] { grid-area: doc; }
  .tabela--extrato td[data-rotulo="Documento"]::before { content: "doc. "; }
  .tabela--extrato td.sem-valor { display: none; }
  .tabela--extrato td[data-rotulo="Conciliação"] { grid-area: conc; overflow: hidden; }
  .tabela--extrato td[data-rotulo="Conciliação"] .etiqueta { white-space: nowrap; }
  .tabela--extrato td[data-rotulo="Saldo"] { grid-area: saldo; text-align: right; font-size: .75rem; }
  .tabela--extrato td[data-rotulo="Saldo"]::before { content: "saldo "; }
  .tabela--extrato td.coluna-acoes {
    grid-area: menu;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabela--extrato td.coluna-acoes .menu-mais__lista { z-index: 20; }
}

/* ---------- impressão ---------- */
/* A lista que se imprime é o conteúdo, em preto sobre branco, na largura da
   folha: sem lateral, topbar, barra de abas, botões nem filtros. */

@media print {
  .lateral, .topbar, .abas, .lote, .atalhos-de-filtro, .filtros__caixa, .menu-mais,
  .paginacao, .salvar-atalho, .folha, .assistente-flutuante,
  .filtros, .periodo, .lote__todos, .coluna-selecao, .link-acao,
  .pagina__cabecalho .acoes-admin, .botao, button {
    display: none !important;
  }

  html, body, .app, .app__principal, main.container {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
  }
  * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  a { text-decoration: none; }

  .tabela-rolagem { overflow: visible; border: 0; }
  .tabela { font-size: 8.5pt; }
  /* Borda só por linha: a tabela volta a ser tabela (as regras do estreito
     valem só em `screen`), e cada célula não leva traço próprio. */
  .tabela { display: table; width: 100%; }
  .tabela tr { border-bottom: 1px solid #999; }
  /* Tabela larga (o fluxo de caixa tem nove colunas) precisa caber nos 718px
     da folha: respiro menor e cabeçalho que quebra. */
  .tabela th, .tabela td { border: 0; padding: .3rem .25rem; }
  .tabela thead th { white-space: normal; letter-spacing: 0; font-size: 7.5pt; }
  tr { break-inside: avoid; }
}