/* CashView — estilos próprios (o que o MudBlazor não cobre)

   DIREÇÃO: claro e arejado. Tela cinza-claríssima, cartão BRANCO, fio de borda
   quase invisível, e o laranja da marca como destaque PONTUAL. O que separa
   cartão de tela é o degrau de luminância, não uma caixa desenhada — por isso
   a borda pode ser fraca. Sombra só onde há sobreposição de verdade (menu,
   diálogo, popover). */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    /* A pilha PRECISA estar aqui, não só no tema Mud: o tema alcança os
       componentes do MudBlazor, e o resto (markup próprio das páginas, o
       Login inteiro, os divs da Home) herda do body. Sem esta linha tudo
       que não é Mud cai no SERIF padrão do navegador.

       Inter na frente, não -apple-system: o App.razor já baixa a Inter do
       Google Fonts. Com a fonte do sistema primeiro, o Mac renderizaria em
       SF Pro, o Windows em Segoe UI, e a fonte baixada não seria usada por
       ninguém — três resultados diferentes para as máquinas da loja. */
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Helvetica Neue', Arial, sans-serif;
    background: var(--sl-bg);
    color: var(--sl-text);
    /* Suaviza o traço no macOS, que é onde a SF Pro de verdade entra. Fora do
       Mac não faz nada — e não faz mal. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.2s, color 0.2s;
}

/* ── Cartão ─────────────────────────────────────────────────────────────────
   As 21 superfícies do app são <MudPaper Elevation="0" Outlined="true">, então
   uma regra só as alcança todas. Raio maior que o dos controles (12 vs 10): é
   o que separa "superfície" de "coisa que se clica" sem engrossar a borda.

   A sombra é um fio de 3% — não é para ser vista, é para o branco do cartão
   não ficar boiando no cinza da tela. */
.mud-paper-outlined {
    border-color: var(--cv-hairline);
    border-radius: var(--cv-radius-card);
    box-shadow: var(--cv-shadow-card);
}

/* Tabela é cartão também: mesmo raio, mesma borda, mesmo fio de sombra. */
.mud-table.mud-table-outlined {
    border-color: var(--cv-hairline);
    border-radius: var(--cv-radius-card);
    box-shadow: var(--cv-shadow-card);
}

/* Cabeçalho de tabela: rótulo, não faixa. Sem fundo pintado — o que marca o
   cabeçalho é o peso do texto e o fio embaixo. */
.mud-table-head .mud-table-cell {
    font-weight: 590;
    color: var(--mud-palette-text-secondary);
    border-bottom-color: var(--mud-palette-lines-default);
}

/* ── Sobreposição ───────────────────────────────────────────────────────────
   Aqui SIM sombra: menu, diálogo e popover flutuam de verdade sobre a página,
   e é a sombra que diz isso. Larga e fraca, não curta e dura. */
.mud-popover-provider .mud-popover,
.mud-dialog {
    box-shadow: var(--cv-shadow-overlay) !important;
    border-radius: var(--cv-radius-card);
}

/* ── Menu lateral ───────────────────────────────────────────────────────────
   Item ativo com tinta suave da marca + texto na cor, em vez de bloco laranja
   chapado: marca a seleção sem transformar o menu em semáforo. */
.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
    font-weight: 590;
}

.mud-nav-link {
    border-radius: var(--cv-radius-control);
}

/* ── Interruptor desligado ──────────────────────────────────────────────────
   O MudBlazor pinta a trilha com `opacity: 0.48` sobre uma cor derivada. Medido
   no tema escuro: a trilha fica em ~rgb(35,35,40) sobre superfície rgb(31,31,33)
   — some. Um interruptor sem trilha visível não se lê como interruptor; parece
   um ponto solto ao lado do rótulo.

   Só o estado DESLIGADO: quando ligado, a trilha recebe a cor de destaque e não
   deve ser sobrescrita. `lines-inputs` é a mesma cor da borda de campo, que é
   exatamente o papel aqui — contorno de controle em repouso. */
.mud-switch-base:not(.mud-checked) + .mud-switch-track {
    background-color: var(--mud-palette-lines-inputs);
    opacity: 1;
}

/* ── Números ────────────────────────────────────────────────────────────────
   tabular-nums é o que faz coluna de número parar de dançar: sem ele, "1" ocupa
   menos que "8" e duas linhas alinhadas à direita saem tortas. Estava só em
   VendasProdutoMensal; aqui vale para as ~20 telas que usam .mono-text. */
.mono-text,
.cv-num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    /* Estas classes marcam UM valor atômico — código, data, S/N, dinheiro.
       Valor atômico não quebra no meio: "R$ 7.769,00" virando duas linhas não
       é só feio, é um número partido. Tabela larga já rola no eixo x
       (.mud-table-container e a regra de .mud-simple-table abaixo). */
    white-space: nowrap;
}

/* ── Realce de valor ────────────────────────────────────────────────────────
   O número principal de uma tela: cor de texto cheia, peso e tabular-nums.

   Chamava-se `.cv-gradient-text` de quando ERA um degradê laranja→âmbar. O
   degradê saiu (número é DADO, e dado se lê melhor em cor sólida) mas o nome
   ficou por dois commits, descrevendo uma coisa que a regra não fazia mais —
   e nome que mente custa mais caro que nome feio: o próximo a mexer procura
   um degradê que não existe. Renomeado nas 14 páginas de uma vez.

   O degradê também era bug de acessibilidade real: pintava o texto com
   `-webkit-text-fill-color: transparent`, então em alto contraste /
   forced-colors o número principal ficava INVISÍVEL, não só feio. */
.cv-valor {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.02em;
}

/* Barra de gráfico: cor sólida da marca. Era `.cv-bar-gradient`, mesmo caso. */
.cv-barra {
    background: var(--cv-accent);
    border-radius: 3px 3px 0 0;
}

/* ── Gráfico de linhas (js/serie-linhas.js) ─────────────────────────────────
   As classes csl-* são escritas pelo módulo, não pela página; por isso moram
   aqui e não no <style> de quem o usa. Cor das SÉRIES vem do payload; eixo,
   grade e tooltip seguem a paleta do tema, então trocar de tema não deixa
   grade preta em fundo escuro. Sem gradiente: área é a cor da série a 10%. */
.csl { outline-offset: 4px; }
.csl-svg { display: block; overflow: visible; }
.csl-grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.csl-eixo { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.csl-tick-y, .csl-tick-x {
    fill: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.csl-linha, .csl-area, .csl-pontos, .csl-destaque { transition: opacity 0.25s ease-out; }
/* Anel de 2px na cor da superfície: o ponto continua legível onde cruza outra linha. */
.csl-ponto { stroke: var(--mud-palette-surface); stroke-width: 2; }
.csl-destaque { stroke: var(--mud-palette-surface); stroke-width: 2; }
.csl-crosshair-linha { stroke: var(--mud-palette-text-secondary); stroke-width: 1; stroke-opacity: 0.6; }
.csl-alvo { cursor: crosshair; }
.csl-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    min-width: 150px;
    max-width: 260px;
    padding: 0.45rem 0.65rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    box-shadow: var(--cv-shadow-overlay);
    font-size: 0.75rem;
    line-height: 1.4;
}
.csl-tip-data { color: var(--mud-palette-text-secondary); font-size: 0.7rem; margin-bottom: 0.2rem; text-transform: capitalize; }
.csl-tip-linha { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
/* Chave de linha, não caixa: no tooltip uma caixa cheia é tinta de dado fazendo papel de rótulo. */
.csl-tip-chave { display: inline-block; width: 14px; height: 2px; border-radius: 1px; flex: none; }
.csl-tip-valor { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.csl-tip-nome { color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; }
.csl-tip-dica { color: var(--mud-palette-text-disabled); font-size: 0.65rem; margin-top: 0.25rem; }
.csl-vazio {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--mud-palette-text-secondary); font-size: 0.85rem; font-style: italic; pointer-events: none;
}

/* ── Hover de card ──────────────────────────────────────────────────────────
   Sem lift e sem glow laranja: card de KPI não é elemento sobreposto, e mover a
   página no hover atrapalha quem lê números lado a lado. Fica só a borda um
   pouco mais presente, que basta para dizer "clicável". */
.cv-card-hover {
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cv-card-hover:hover {
    border-color: var(--mud-palette-text-disabled) !important;
}

/* ── Foco de teclado ────────────────────────────────────────────────────────
   O projeto não tinha NENHUMA regra de foco, e várias telas têm <button> próprio
   com `outline: none` (DateRangePicker, os seg-btn dos dashboards, o olho da
   senha no login). Nesses, o foco dependia do default do navegador — e sumia de
   vez em quem zerava o outline. Um anel único, com offset, resolve para todos.

   :focus-visible e não :focus: o anel aparece para teclado e não para clique. */

/* Alvo de foco programatico (o <h1> do FocusOnNavigate em Routes.razor) NAO leva
   anel. O Blazor foca o titulo a cada navegacao para o leitor de tela saber onde
   caiu — foco de orientacao, nao de interacao. Sem esta regra sobra o anel PADRAO
   DO NAVEGADOR (rgb(16,16,16) auto 1px, medido no Chromium), que desenha uma
   caixa preta em volta do titulo de toda tela com <h1>: Home, RelatorioTroca,
   NfeVisualizacao e FichaOs. So `tabindex="-1"`, entao nada que se alcance pelo
   Tab perde o anel. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--cv-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Barra de rolagem ───────────────────────────────────────────────────────
   Fina e sem trilho pintado: a barra grossa cinza do padrão do Windows é o
   elemento mais escuro de uma tela clara, e rouba a atenção do conteúdo. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

[data-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }

/* ── Movimento ──────────────────────────────────────────────────────────────
   Quem pediu menos movimento no sistema operacional recebe menos movimento.
   Não existia nenhuma guarda dessas no projeto, e há animação infinita (o pulse
   do DRE) rodando o dia inteiro numa tela de trabalho. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Tabela larga no celular ────────────────────────────────────────────────
   O MudSimpleTable renderiza o <table> direto, SEM o .mud-table-container de
   scroll que o MudTable completo tem. Sem isto, tabela com muitas colunas
   (Fluxo de Caixa, Mix de Pagamento, detalhe de produto…) estoura a página.

   `.tbl-scroll` é o mesmo container para <table> escrito à mão — hoje as
   Notas de Entrada e os dois quadros do DANFE. Fica aqui, e não em cada
   página, porque é uma regra só: duplicada, a próxima tabela crua nasce sem
   ela e ninguém percebe até alguém abrir no celular. */
.mud-simple-table,
.tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.text-right {
    text-align: right;
}