/* =========================================================================
   VB CASH - BACKOFFICE
   Só o que o MudBlazor não cobre: a tela de espera do primeiro acesso, o
   erro nativo do Blazor e dois ajustes de leitura no celular.

   ⚠️ Regra desta folha: NADA de estilizar tabela aqui. A grade quebrada do
   portal antigo nasceu exatamente assim -- CSS artesanal por cima de um
   componente caseiro. Aqui a tabela é o MudDataGrid e quem manda no visual
   dela é o tema, em TemaVbCash.cs.
   ========================================================================= */

html, body {
    margin: 0;

    /* ⚠️ O FUNDO VEM DO TEMA. NÃO FIXE UMA COR AQUI.
       Este arquivo já teve `background: #2B2B2D` cravado, e o resultado foi
       um bug que parecia de outra coisa: com o Windows em modo claro, o
       MudBlazor pintava o texto de #1F1F21 (escuro, correto para tema claro)
       sobre este grafite fixo. Título da página, seletor de situação e ícones
       ficavam ilegíveis — mas só FORA dos MudPaper, que pintam o próprio
       fundo. Parecia um problema de opacidade em elementos soltos; era o
       fundo brigando com o tema.

       O valor depois da vírgula é fallback, e só vale enquanto o runtime do
       Blazor está baixando — a tela de espera é grafite. Assim que o
       MudThemeProvider monta, a variável assume e o fundo acompanha claro
       ou escuro sozinho. */
    background: var(--mud-palette-background, #2B2B2D);
    color: var(--mud-palette-text-primary, #EDEBE9);

    font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- splash */
.splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: #2B2B2D;
    padding: 24px;
    box-sizing: border-box;
}

.splash-logo {
    width: min(280px, 62vw);
    height: auto;
}

.splash-barra {
    width: min(280px, 62vw);
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

/* Indeterminada de propósito: o navegador não sabe quanto falta do download
   do runtime, e uma barra que finge saber é pior que uma que não promete. */
.splash-barra span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: #F85B01;
    animation: desliza 1.1s ease-in-out infinite;
}

@keyframes desliza {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.splash-texto {
    margin: 0;
    color: #8E8A86;
    font-size: 13px;
    letter-spacing: .04em;
}

.splash-velho {
    position: absolute;
    bottom: 28px;
    width: 78px;
    height: auto;
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
    .splash-barra span { animation: none; width: 100%; opacity: .5; }
}

/* -------------------------------------------------- erro nativo do Blazor */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    padding: 14px 18px;
    background: #2B2B2D;
    color: #fff;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .35);
    font-size: 14px;
}

#blazor-error-ui .reload {
    color: #FF7A2F;
    margin-left: 10px;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 14px;
    top: 12px;
    cursor: pointer;
    color: #8E8A86;
}

/* ------------------------------------------------------ leitura no celular */
@media (max-width: 600px) {
    /* Números de dinheiro e contagem alinhados na coluna. Sem isto os dígitos
       dançam de linha para linha e a comparação visual vira adivinhação. */
    .mud-table-cell .numero,
    .numero { font-variant-numeric: tabular-nums; }
}


/* =========================================================================
   AUTOFILL DO NAVEGADOR

   Duas correções, e as duas são necessárias por motivos diferentes.
   ========================================================================= */

/* 1) O AZUL DO CHROME.
      O navegador pinta o campo preenchido de azul-claro por cima do tema, e
      não há propriedade que remova isso — `background` é ignorado no estado
      autofill. O jeito que funciona é uma sombra interna sólida cobrindo o
      campo inteiro, e a transição absurdamente longa, que impede o navegador
      de repintar o azul depois. É feio de ler e é o caminho conhecido. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--mud-palette-surface) inset !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    caret-color: var(--mud-palette-text-primary);
    transition: background-color 100000s ease-in-out 0s;
}

/* 2) O RÓTULO QUE NÃO SOBE — CINTO DE SEGURANÇA.
      Quem resolve isto de verdade é a função vbcashSincronizarAutofill do
      index.html: ela avisa o Blazor, o componente re-renderiza e sobe o
      rótulo sozinho. Esta regra existe para o caso de o JS não rodar (falha
      de interop, tela lenta): pelo menos o rótulo não fica escrito POR CIMA
      do e-mail preenchido.

      Os valores são os que o próprio MudBlazor aplica no estado encolhido,
      lidos do navegador: translate(14px, -6px) scale(.75). Se um dia o
      componente mudar essa animação, é aqui que a régua desalinha. */
.mud-input-control:has(input:-webkit-autofill) > .mud-input-control-input-container > label,
.mud-input-control:has(input:autofill) > .mud-input-control-input-container > label {
    transform: translate(14px, -6px) scale(.75) !important;
}


/* =========================================================================
   CARTÕES DA MESMA LINHA COM A MESMA ALTURA

   ⚠️ POR QUE UMA REGRA NO GRID E NÃO EM CADA CARTÃO.
   A primeira tentativa foi marcar item por item (`Class="d-flex"` no MudItem
   + `flex-grow` no MudPaper). Funcionou nos que eu marquei e deixou de fora
   exatamente os que estavam dentro de um `@if` — os blocos consolidados do
   fechamento. Ou seja: a correção dependia de eu lembrar de aplicá-la em
   cada bloco novo, e o primeiro esquecimento já aconteceu.

   Aqui a marcação vai no MudGrid, uma vez, e vale para todo item que ele
   tiver hoje ou venha a ter depois — inclusive os que só aparecem sob
   condição. É a diferença entre corrigir o sintoma e corrigir a regra.

   `align-items: stretch` é o padrão do flex, mas está explícito porque o
   MudBlazor às vezes define outro valor no próprio .mud-grid.
   ========================================================================= */
.linha-igual { align-items: stretch; }

.linha-igual > .mud-grid-item { display: flex; }

.linha-igual > .mud-grid-item > .mud-paper,
.linha-igual > .mud-grid-item > .painel {
    flex-grow: 1;
    width: 100%;
}


/* =========================================================================
   LISTAS EM CARTÃO (a leitura do celular)

   ⚠️ POR QUE ESPAÇO E BORDA IMPORTAM AQUI E NÃO NA GRADE.
   Numa tabela, a linha divisória e o alinhamento das colunas já separam um
   registro do outro. Em cartões empilhados não há nenhum dos dois: sem
   respiro e sem borda, quinze eventos viram um bloco cinza contínuo e o
   polegar não sabe onde um termina e o outro começa.

   14px de distância e uma borda de 1px é o mínimo que separa sem esticar a
   lista a ponto de exigir o dobro de rolagem.
   ========================================================================= */
.lista-cartoes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lista-cartoes > .mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 14px 16px;
}

/* O toque precisa de resposta visível: sem isso, em conexão lenta a pessoa
   toca de novo achando que não pegou. */
.lista-cartoes > .mud-paper.clicavel {
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}

.lista-cartoes > .mud-paper.clicavel:hover { border-color: var(--mud-palette-primary); }
.lista-cartoes > .mud-paper.clicavel:active { transform: scale(.99); }


/* =========================================================================
   BARRA DE TITULO DAS LISTAS  (titulo + busca + botoes)

   ⚠️ A REGRA MORA AQUI, UMA VEZ, E NAO NO <style> DE CADA PAGINA.
   Ela estava copiada em cinco telas. Copia significa que a proxima correcao
   precisa lembrar das cinco -- e da primeira vez que isso aconteceu (altura
   dos cartoes) o primeiro esquecimento veio junto.

   ⚠️ NO CELULAR A ORDEM MUDA DE PROPOSITO: titulo e botoes na primeira
   linha, busca inteira na segunda. Com os tres na mesma linha, como estava,
   nada cabia: o rotulo do botao cortava no meio ("Ordena") e o campo de
   busca virava um tocinho de 80px. Botao truncado nao e so feio -- deixa de
   dizer o que faz.
   ========================================================================= */
.barra-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* O titulo nao encolhe nem quebra: e ele que diz onde a pessoa esta. */
.barra-titulo > .titulo { flex: 0 0 auto; margin-right: auto; }

.barra-titulo > .busca { flex: 0 1 auto; }

.barra-titulo > .acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Rotulo de botao nunca quebra em duas linhas nem some pela metade. */
.barra-titulo > .acoes .mud-button-root { white-space: nowrap; }

@media (max-width: 700px) {
    .barra-titulo > .titulo { margin-right: 0; }

    /* Botoes ACIMA, busca ABAIXO ocupando a linha inteira. */
    .barra-titulo > .acoes { order: 2; margin-left: auto; }
    .barra-titulo > .busca { order: 3; flex: 1 1 100%; }
}


/* =====================================================================
   CAMPO DE DATA E DE HORA  (Componentes/CampoData e CampoHora)

   ⚠️ O ICONE NAO PODE SUMIR.
   Esses campos passaram a aceitar digitacao, e com isso o clique no campo
   virou "digitar" em vez de "abrir o calendario". Quem abre o calendario
   (e o relogio) agora e so o icone ao lado -- se ele ficar apagado, some o
   unico caminho de quem prefere escolher a data clicando.
   ===================================================================== */
.campo-quando .mud-input-adornment-end,
.campo-quando .mud-input-adornment-start { opacity: .7; }

/* Digito com largura fixa: 01/09 e 11/09 ocupam o mesmo espaco e a coluna
   nao "dança" enquanto se digita. */
.campo-quando input { font-variant-numeric: tabular-nums; }


/* =====================================================================
   LINHA E CARTAO QUE ABREM A EDICAO

   ⚠️ O CURSOR E O UNICO AVISO DE QUE A LINHA CLICA.
   O icone de lapis no fim da linha saiu das grades: era um alvo de vinte
   pixels que, no toque, erra mais do que acerta. Quem edita agora e a
   linha inteira -- e sem o cursor de mao ninguem descobre isso, continua
   procurando o botao que nao existe mais.

   ⚠️ MORA AQUI, e nao no <style> de uma pagina. O `::deep` so funciona em
   arquivo .razor.css; dentro de um <style> inline ele e CSS invalido e a
   regra e simplesmente ignorada -- o cursor nao aparece e nada avisa.
   ===================================================================== */
tr.linha-clicavel { cursor: pointer; }

.cartao-clicavel { cursor: pointer; }
.cartao-clicavel:active { background: var(--mud-palette-action-default-hover); }