/* /Dialogs/EntryFilterDialog.razor.rz.scp.css */
/* why: `fieldset` mais `legend` porque as duas datas formam uma unidade, e as duas quantias outra.
   `ui-ux.md` manda usar região comum quando o agrupamento precisa sobreviver ao refluxo — só a
   proximidade se desfaz quando os campos empilham na largura de telefone. */
.filter-period[b-rp9uh7t08w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-loose);
    margin: 0 0 var(--space-snug);
    padding: var(--space-snug) var(--space-loose);
    border: 1px solid var(--bevel-shadow);
}

.filter-period legend[b-rp9uh7t08w] {
    padding-inline: var(--space-tight);
    color: var(--text-muted);
}

.filter-period .field[b-rp9uh7t08w] {
    margin-bottom: 0;
}
/* /Dialogs/ImportWizardDialog.razor.rz.scp.css */
/* O assistente é o único diálogo que mostra tabela, então o que ele acrescenta ao `.dialog` mora
   aqui em isolamento de CSS em vez de virar modificador global sem segundo consumidor. */

/* why: mais largo que os 560px do diálogo comum porque a prévia de lançamentos tem oito colunas.
   No teto de 560px cada uma ficaria com 70px, e a data e o valor sairiam elididos — uma prévia
   ilegível não cumpre a única função que ela tem, que é conferir antes de gravar. */
.dialog--wizard[b-ipiy48aqaf] {
  max-width: min(900px, 100%);
  width: 100%;
}

.wizard__step[b-ipiy48aqaf] {
  margin: 0;
  padding: var(--space-tight) var(--space-loose);
  border-bottom: 1px solid var(--border);
  background: var(--chrome);
  color: var(--text-muted);
}

.wizard__formats[b-ipiy48aqaf] {
  display: flex;
  gap: var(--space-loose);
  margin: 0 0 var(--space-loose);
  padding: var(--space-snug);
  border: 1px solid var(--border);
}

.wizard__formats legend[b-ipiy48aqaf] {
  padding: 0 var(--space-tight);
}

/* why: altura fixa e rolagem própria. Um arquivo de duzentas linhas faria o diálogo crescer além
   da tela, e os botões de avançar e cancelar sairiam por baixo do rodapé do navegador. */
.wizard__table[b-ipiy48aqaf] {
  overflow: auto;
  max-height: 40dvh;
  margin-bottom: var(--space-snug);
  background: var(--surface);
}

.wizard__table table[b-ipiy48aqaf] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.wizard__table th[b-ipiy48aqaf],
.wizard__table td[b-ipiy48aqaf] {
  padding: 0 var(--space-snug);
  height: var(--row-height);
  text-align: left;
  /* why: as três juntas são o que elide, e o `title` de cada célula devolve o texto inteiro. Sem
     elisão a linha crua de uma recusa esticaria a tabela muito além da largura do diálogo. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard__table th[b-ipiy48aqaf] {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--chrome-header);
  font-weight: 600;
  border-bottom: 1px solid var(--bevel-shadow);
}

.wizard__table tbody tr:nth-child(even)[b-ipiy48aqaf] {
  background: var(--surface-band);
}

.wizard__clean[b-ipiy48aqaf] {
  margin: 0 0 var(--space-snug);
  color: var(--text-muted);
}

.wizard__count[b-ipiy48aqaf] {
  margin: 0 0 var(--space-tight);
  font-weight: 600;
}
/* /Grid/ListGrid.razor.rz.scp.css */
/* A grade, em isolamento de CSS porque as classes daqui não têm segundo consumidor: as três telas
   de lista usam o componente, nunca as classes. */

.list-grid[b-hcluwanofm] {
    position: relative;
    /* why: a rolagem mora aqui dentro e não no `<main>`. Uma grade larga que rolasse a página
       inteira levaria a barra de status junto para fora da tela. */
    overflow: auto;
    max-height: 100%;
}

.list-grid__table[b-hcluwanofm] {
    width: 100%;
    border-collapse: collapse;
    /* why: `fixed` é o que faz o `<colgroup>` mandar na largura. No modo automático o navegador
       remede a coluna a cada carga, e a grade dança de largura quando o filtro muda o conteúdo. */
    table-layout: fixed;
}

.list-grid__table th[b-hcluwanofm],
.list-grid__table td[b-hcluwanofm] {
    padding: 0 var(--space-snug);
    height: var(--row-height);
    text-align: left;
    /* why: as três propriedades juntas são o que elide. Sem `overflow: hidden` a reticência nunca
       aparece, e sem `nowrap` a célula quebra em duas linhas em vez de cortar — que é exatamente o
       defeito que o nome do cliente teve no gráfico do desktop. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-grid__table th[b-hcluwanofm] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--chrome-header);
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid var(--bevel-shadow);
}

.align-end[b-hcluwanofm] {
    text-align: right !important;
}

.list-grid__sort[b-hcluwanofm] {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.align-end .list-grid__sort[b-hcluwanofm] {
    justify-content: flex-end;
}

.list-grid__arrow[b-hcluwanofm] {
    width: 8px;
    height: 5px;
    flex-shrink: 0;
}

/* why: a faixa alternada e não uma borda entre linhas. As duas cores diferem por 1.06:1 no claro
   e 1.04:1 no escuro — medido no head desktop em 2026-08-10 —, que é o "bem leve" que separa linha
   de linha sem listrar a tela. */
.list-grid__table tbody tr[b-hcluwanofm] {
    background: var(--surface);
}

.list-grid__table tbody tr:nth-child(even)[b-hcluwanofm] {
    background: var(--surface-band);
}

.list-grid__table tbody tr:hover[b-hcluwanofm] {
    background: var(--surface-sunken);
}

/* why: a seleção é um tom pálido e o texto continua com a cor de sempre. O realce cru do sistema
   comeria o farol de situação, que é o motivo de o desktop ter medido 0.82 de mistura em direção
   ao fundo em vez de usar o azul inteiro. */
.list-grid__table tbody tr.selected[b-hcluwanofm],
.list-grid__table tbody tr.selected:hover[b-hcluwanofm] {
    background: var(--selection);
}

.list-grid__text[b-hcluwanofm] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-grid__actions[b-hcluwanofm] {
    position: relative;
    overflow: visible !important;
}

.list-grid__dots[b-hcluwanofm] {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.list-grid__dots:hover[b-hcluwanofm] {
    border-color: var(--border);
    background: var(--chrome);
    color: var(--text);
}

.list-grid__dots svg[b-hcluwanofm] {
    width: 4px;
    height: 16px;
}

.menu--row[b-hcluwanofm] {
    top: 100%;
    left: 0;
}

.list-grid__empty[b-hcluwanofm] {
    margin: 0;
    padding: var(--space-section);
    max-width: none;
    color: var(--text-muted);
    text-align: center;
}
/* /Layout/CommandPalette.razor.rz.scp.css */
/* why: a paleta é mais larga que um diálogo comum porque cada linha carrega rótulo e descrição, e
   estreitá-la faria a descrição elidir logo na terceira palavra — que é onde ela diz de qual das
   duas telas o comando de arquivo é. */
.palette[b-fljojya7bh] {
    width: min(560px, 100%);
}

.palette__field[b-fljojya7bh] {
    padding: var(--space-snug);
    border-bottom: 1px solid var(--border);
}

.palette__field .input[b-fljojya7bh] {
    width: 100%;
}

/* why: a lista rola dentro de si, e o diálogo não cresce com o número de resultados. Um diálogo
   que muda de altura a cada tecla move o que a pessoa está lendo. */
.palette__results[b-fljojya7bh] {
    max-height: 320px;
    overflow-y: auto;
}

.palette__group[b-fljojya7bh] {
    margin: var(--space-snug) 0 var(--space-tight);
    padding-inline: var(--space-snug);
    max-width: none;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.palette__item[b-fljojya7bh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--space-tight) var(--space-snug);
    border: 1px solid transparent;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.palette__item:hover[b-fljojya7bh],
.palette__item.highlighted[b-fljojya7bh] {
    background: var(--selection);
    border-color: var(--border);
}

.palette__description[b-fljojya7bh] {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.palette__empty[b-fljojya7bh],
.palette__hint[b-fljojya7bh] {
    margin: 0;
    padding: var(--space-snug);
    max-width: none;
    font-size: var(--font-size-small);
}

.palette__hint[b-fljojya7bh] {
    border-top: 1px solid var(--border);
}
/* /Layout/LoginScreen.razor.rz.scp.css */
/* why: isolamento de CSS do Blazor em vez de `win32.chrome.css`. O login é a única tela que roda
   fora do shell, e as classes daqui não têm segundo consumidor — pô-las na folha global seria
   carregá-las nas outras quinze telas para nada. */

.login[b-p30sgh0rz2] {
    display: grid;
    place-items: center;
    /* why: a altura vem do `flex: 1` que o `.page` dá, e nunca de `100dvh`. Com a faixa de
       demonstração em cima, `100dvh` estouraria a moldura pela altura dela. */
    min-height: 0;
    overflow: auto;
    padding: var(--space-loose);
    background: var(--backdrop);
}

.login__panel[b-p30sgh0rz2] {
    display: flex;
    flex-direction: column;
    width: min(380px, 100%);
    padding: var(--space-section);
}

.login__theme[b-p30sgh0rz2] {
    align-self: flex-end;
    margin-bottom: var(--space-snug);
    font-size: var(--font-size-small);
}

.login__title[b-p30sgh0rz2] {
    margin-bottom: var(--space-tight);
}

.login__subtitle[b-p30sgh0rz2] {
    margin-bottom: var(--space-section);
}

.login__submit[b-p30sgh0rz2] {
    margin-top: var(--space-snug);
}

/* why: a caixa de marcação alinha com os campos acima em vez de recuar. Ela pertence ao mesmo
   bloco de entrada, e um recuo a leria como nota de rodapé do campo de senha. */
.login__remember[b-p30sgh0rz2] {
    margin-bottom: var(--space-snug);
}

.login__separator[b-p30sgh0rz2] {
    width: 100%;
    margin: var(--space-section) 0 var(--space-loose);
    border-left: none;
    border-right: none;
}

.login__credit[b-p30sgh0rz2] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-snug);
    margin: 0;
    font-size: var(--font-size-small);
}

/* why: largura do painel, e não `auto`. A linha centraliza sob o cartão, e deixá-la crescer com o
   texto faria o link dançar de posição quando o rótulo mudar. */
.login__download[b-p30sgh0rz2] {
    width: min(380px, 100%);
    margin: var(--space-snug) 0 0;
    text-align: center;
    font-size: var(--font-size-small);
}

.login__download a[b-p30sgh0rz2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight);
}

/* why: `em` e não `px`. O ícone acompanha a escala de texto que o operador escolher, que é a mesma
   regra que a WCAG 1.4.4 cobra do resto da tela. */
.login__download-icon[b-p30sgh0rz2] {
    width: 1em;
    height: 1em;
    flex: none;
}
/* /Pages/DashboardScreen.razor.rz.scp.css */
.dashboard[b-2tpbxsvuiw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-loose);
}

/* why: `auto-fit` com piso, e não três colunas fixas. Abaixo de 640px os três cartões empilham
   sozinhos em vez de espremer `R$ 128.450,00` até quebrar em duas linhas — é a mesma cedência que
   a lateral já fez na largura de telefone. */
.dashboard__indicators[b-2tpbxsvuiw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-loose);
}

.indicator[b-2tpbxsvuiw] {
    padding: var(--space-snug) var(--space-loose);
    /* why: a faixa de cor é borda à esquerda, e não fundo colorido. Fundo pintado obrigaria a
       recalcular o contraste do texto nos dois temas; a faixa marca a série sem tocar na
       superfície que o tema define. */
    border-left-width: 4px;
    border-left-style: solid;
}

.indicator--inbound[b-2tpbxsvuiw] {
    border-left-color: var(--series-green);
}

.indicator--outbound[b-2tpbxsvuiw] {
    border-left-color: var(--series-red);
}

.indicator--balance[b-2tpbxsvuiw] {
    border-left-color: var(--series-blue);
}

.indicator__caption[b-2tpbxsvuiw] {
    margin: 0;
    max-width: none;
    color: var(--text-muted);
    font-size: var(--font-size-small);
    letter-spacing: 0.08em;
}

.indicator__value[b-2tpbxsvuiw] {
    margin: 0;
    max-width: none;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dashboard__panel[b-2tpbxsvuiw] {
    padding: var(--space-loose);
}

.dashboard__panel h2[b-2tpbxsvuiw] {
    margin-bottom: var(--space-loose);
}

.bars[b-2tpbxsvuiw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-snug);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bars__row[b-2tpbxsvuiw] {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-loose);
}

/* why: as três propriedades juntas são o que elide, e é por isso que a barra é HTML. Em SVG o mesmo
   resultado exigiria truncar caractere a caractere medindo o texto — o defeito que partia
   `Joana Ribeiro Cons...` em duas linhas sobre a barra de baixo, no head desktop. */
.bars__label[b-2tpbxsvuiw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* why: a faixa para de crescer com a janela. Numa tela larga a barra do maior atravessava a
   largura inteira sem acrescentar leitura — o que um gráfico de barras diz é a razão entre elas, e
   ela já está dada em qualquer largura. Medido e limitado uma vez no head desktop, em 720px. */
.bars__track[b-2tpbxsvuiw] {
    max-width: 720px;
    height: var(--row-height);
    background: var(--surface-sunken);
}

.bars__fill[b-2tpbxsvuiw] {
    display: block;
    height: 100%;
    /* why: piso de 2px para que a menor fatia continue visível. Zero de largura leria como cliente
       sem movimento, quando o que houve foi arredondamento contra a maior. */
    min-width: 2px;
}

.bars__fill--blue[b-2tpbxsvuiw] {
    background: var(--series-blue);
}

.bars__fill--green[b-2tpbxsvuiw] {
    background: var(--series-green);
}

.bars__fill--purple[b-2tpbxsvuiw] {
    background: var(--series-purple);
}

.bars__fill--amber[b-2tpbxsvuiw] {
    background: var(--series-amber);
}

.bars__fill--red[b-2tpbxsvuiw] {
    background: var(--series-red);
}

.bars__value[b-2tpbxsvuiw] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* why: o envelope é `relative` e o SVG é o único filho de fluxo, então a altura da caixa é
   exatamente a altura do desenho. É isso que faz o rótulo em `top: 42%` cair sobre a linha de grade
   que o `viewBox` desenhou em 42% da altura dele — sem `preserveAspectRatio="none"`, que esticaria
   a espessura do traço junto. */
.trend__plot[b-2tpbxsvuiw] {
    position: relative;
}

.trend__plot svg[b-2tpbxsvuiw] {
    display: block;
    width: 100%;
    height: auto;
}

.trend__scale[b-2tpbxsvuiw] {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

.trend__period[b-2tpbxsvuiw] {
    display: flex;
    justify-content: space-between;
    margin: 0;
    max-width: none;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.trend__grid[b-2tpbxsvuiw] {
    stroke: var(--border);
    stroke-width: 1;
}

.trend__axis[b-2tpbxsvuiw] {
    stroke: var(--text-muted);
    stroke-width: 1;
}

.trend__line[b-2tpbxsvuiw] {
    fill: none;
    stroke: var(--series-blue);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* why: a área é a mesma matiz da linha, translúcida. Uma segunda cor sugeriria uma segunda série,
   quando o que ela faz é só dar peso à curva que já existe. */
.trend__area[b-2tpbxsvuiw] {
    fill: var(--series-blue);
    fill-opacity: 0.18;
    stroke: none;
}

/* /Pages/DesignSystemScreen.razor.rz.scp.css */
/* why: a folga entre cartões é `margin-bottom` e não `gap` de um flex, porque `.reading-column` é
   um bloco comum que já centraliza pelo `max-width`. Trocá-lo por flex só para ter `gap` mudaria a
   classe global por causa desta tela. */
.design-card[b-kpp6mk5vnd] {
    margin-bottom: var(--space-section);
    padding: var(--space-loose) var(--space-section);
}

.design-card h2[b-kpp6mk5vnd] {
    margin-bottom: var(--space-snug);
}

.design-card p:last-child[b-kpp6mk5vnd] {
    margin-bottom: 0;
}

.palette__heading[b-kpp6mk5vnd] {
    margin: var(--space-loose) 0 var(--space-snug);
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* why: duas colunas com piso, como o cartão do head desktop. Abaixo do piso elas viram uma só em
   vez de espremer `Control puxado a WindowText` até quebrar em três linhas. */
.palette[b-kpp6mk5vnd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-snug) var(--space-loose);
    margin: 0;
    padding: 0;
    list-style: none;
}

.palette__item[b-kpp6mk5vnd] {
    display: flex;
    align-items: center;
    gap: var(--space-snug);
    min-width: 0;
}

/* why: a amostra tem borda própria porque as duas pontas da escala somem contra o fundo — a
   superfície clara sobre o cartão claro, e a moldura escura sobre o cartão escuro. Sem a borda, a
   linha pareceria ter uma amostra faltando. */
.palette__swatch[b-kpp6mk5vnd] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.palette__text[b-kpp6mk5vnd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.palette__name[b-kpp6mk5vnd],
.palette__detail[b-kpp6mk5vnd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette__detail[b-kpp6mk5vnd] {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.type-sample[b-kpp6mk5vnd] {
    margin-bottom: var(--space-tight);
}

.type-sample--heading[b-kpp6mk5vnd] {
    font-size: 1rem;
    font-weight: 600;
}

.type-sample--small[b-kpp6mk5vnd] {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.type-sample--code[b-kpp6mk5vnd] {
    margin-bottom: var(--space-loose);
}
/* /Pages/EntriesScreen.razor.rz.scp.css */
/* why: coluna flex de altura cheia para que os totais fiquem parados e só a grade role. Sem o
   `min-height: 0` o filho flex adota a altura do conteúdo e a grade empurra os totais para fora da
   tela em vez de rolar dentro de si — é o mesmo `minmax(0, 1fr)` implícito que o `.shell__main`
   já teve de declarar à mão. */
.entries[b-0ta6wpakfe] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: var(--space-snug);
}

.entries[b-0ta6wpakfe]  .list-grid {
    flex: 1;
    min-height: 0;
}

/* why: os totais encostam à direita porque é onde a vírgula decimal alinha, e é onde o olho de
   quem lê planilha procura soma. */
.entries__totals[b-0ta6wpakfe] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-section);
    padding: var(--space-snug) 0;
    color: var(--text-muted);
}

.entries__totals strong[b-0ta6wpakfe] {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}