/* ---------------------------------------------------------------------------
   Emsoft Gerencial — estilos da marca.
   A paleta abaixo repete os valores de Theme/TemaEmsoft.cs; alterar um lado
   exige alterar o outro.
   --------------------------------------------------------------------------- */

:root {
    --emsoft-azul: #1F6FEB;
    --emsoft-azul-claro: #4DA6FF;
    --emsoft-fundo-escuro: #050B14;
    --emsoft-superficie-escura: #0C1626;
    --emsoft-borda-escura: #1B2A42;
}

html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
}

.emsoft-titulo-leve {
    font-weight: 300;
    opacity: .8;
}

.emsoft-drawer-header {
    min-height: 64px;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Tela de login — renderizada fora do MudBlazor (SSR estático), então traz
   o próprio estilo.
   --------------------------------------------------------------------------- */

.emsoft-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(31, 111, 235, .35), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(77, 166, 255, .22), transparent 55%),
        var(--emsoft-fundo-escuro);
    color: #E6EDF7;
}

.emsoft-login__cartao {
    width: 100%;
    max-width: 400px;
    background: var(--emsoft-superficie-escura);
    border: 1px solid var(--emsoft-borda-escura);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.emsoft-login__marca {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .35rem;
}

.emsoft-login__ponto {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--emsoft-azul-claro);
    box-shadow: 0 0 14px var(--emsoft-azul-claro);
    flex: none;
}

.emsoft-login__titulo {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -.01em;
}

.emsoft-login__subtitulo {
    margin: 0 0 1.75rem;
    font-size: .875rem;
    color: #93A4BC;
}

/* Faixa que diz o banco antes do login. Só aparece fora de produção — quem abre
   dois atalhos precisa saber em qual janela está antes de começar a trabalhar. */
.emsoft-login__ambiente {
    margin: -1rem 0 1.5rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 167, 38, .45);
    background: rgba(255, 167, 38, .12);
    color: #FFB74D;
    font-size: .8125rem;
}

.emsoft-login__campo {
    margin-bottom: 1rem;
}

.emsoft-login__rotulo {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: .375rem;
    color: #C3D0E3;
}

.emsoft-login__entrada {
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    font-size: .95rem;
    font-family: inherit;
    color: #E6EDF7;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--emsoft-borda-escura);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.emsoft-login__entrada:focus {
    border-color: var(--emsoft-azul-claro);
    box-shadow: 0 0 0 3px rgba(77, 166, 255, .18);
}

.emsoft-login__botao {
    width: 100%;
    margin-top: .5rem;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--emsoft-azul);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

.emsoft-login__botao:hover {
    background: #1a5fd0;
}

.emsoft-login__botao:active {
    transform: translateY(1px);
}

.emsoft-login__alerta {
    margin-bottom: 1.25rem;
    padding: .7rem .85rem;
    font-size: .85rem;
    border-radius: 8px;
    background: rgba(217, 45, 32, .14);
    border: 1px solid rgba(249, 112, 102, .45);
    color: #FFC5C0;
}

.emsoft-login__rodape {
    margin-top: 1.5rem;
    font-size: .75rem;
    text-align: center;
    color: #6E7F97;
}

/* ---------------------------------------------------------------------------
   Ajustes gerais de tabela/listagem
   --------------------------------------------------------------------------- */

.emsoft-tabela-densa .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* table-layout:auto (padrão do MudTable) mede o texto da célula ANTES de
   cortar — uma coluna com white-space:nowrap "empurra" as vizinhas, mesmo com
   overflow:hidden. Só table-layout:fixed faz as larguras do <MudTh> (e o
   restante para a coluna sem largura própria) valerem de verdade; aplicado só
   nas tabelas marcadas, não em toda .emsoft-tabela-densa, porque a maioria
   não tem esse mix de coluna fixa + coluna flexível truncada. */
.emsoft-tabela-truncar .mud-table-root {
    table-layout: fixed;
}

.emsoft-monoespacado {
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .85em;
}

/* O MudBlazor 9 não traz utilitários tipo Bootstrap (text-truncate, text-right),
   e o Bootstrap não está referenciado: estes dois são nossos. */

/* display:inline-block é o que faz max-width/overflow/text-overflow valerem
   de verdade: num <span> (inline puro) o navegador ignora width e max-width
   por definição da spec, então nada corta — só "parece" que funciona quando o
   elemento por acaso é filho de um container flex (MudStack), que blockifica
   o filho sozinho. Fora de flex (ex.: <span> direto dentro de <td>/MudTd),
   sem isto o texto vaza por cima da coluna vizinha. */
.emsoft-truncar {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    vertical-align: bottom;
}

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

/* Valor em dinheiro não quebra linha. Sem isto, uma coluna estreita parte
   "R$ 1.234.567,89" em duas linhas — o "R$" em cima e o número embaixo —, e a
   coluna passa a parecer duas. Vale para a célula inteira, cabeçalho e rodapé de
   total inclusive, e o alinhamento à direita vem junto porque toda coluna de valor
   é alinhada assim. */
.emsoft-valor,
.emsoft-valor .mud-typography {
    white-space: nowrap;
}

td.emsoft-valor,
th.emsoft-valor {
    text-align: right;
}

/* Observação na linha da listagem: mostra o começo do texto e corta o resto, com
   o conteúdo inteiro no tooltip. Sem o corte, uma observação longa alargaria a
   coluna e empurraria as demais para fora da tela. */
.emsoft-observacao-linha {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
    font-style: italic;
    opacity: .75;
}

/* ---------------------------------------------------------------------------
   Programação financeira.
   A tela é larga por natureza (uma coluna por conta bancária), e a leitura
   depende de distinguir de relance a linha que exige ação da que só informa.
   --------------------------------------------------------------------------- */

/* Vencido e ainda em aberto: a linha que precisa ser resolvida primeiro. */
.emsoft-linha-vencida td {
    background-color: rgba(var(--mud-palette-error-rgb), .07);
}

/* Abre uma contraparte. Um mesmo fornecedor pode ocupar várias linhas (uma por
   vencimento no mês), e sem este traço duas linhas do mesmo nome e duas de nomes
   diferentes ficariam idênticas. */
.emsoft-linha-grupo td {
    border-top: 1px solid var(--mud-palette-divider);
}

.emsoft-linha-grupo:first-child td {
    border-top: none;
}

.emsoft-linha-total th {
    font-weight: 600;
    border-top: 2px solid var(--mud-palette-divider);
}

/* Coluna congelada ao rolar na horizontal (arrastando com a "mão" ou pela barra
   de rolagem): fica plantada na borda esquerda enquanto o resto da tabela passa
   por baixo. O fundo tem de ser opaco — sem ele o texto das colunas de conta
   aparece por trás do nome do fornecedor durante o arrasto. */
.emsoft-coluna-fixa {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-divider);
}

/* A linha vencida tinge TODAS as células com vermelho translúcido — inclusive
   esta. Sem a base opaca abaixo, o tingimento de 7% deixaria a mesma fuga de
   texto por trás que a regra acima existe para evitar. */
.emsoft-linha-vencida td.emsoft-coluna-fixa {
    background-color: var(--mud-palette-surface);
    background-image: linear-gradient(
        rgba(var(--mud-palette-error-rgb), .07), rgba(var(--mud-palette-error-rgb), .07));
}

/* ---------------------------------------------------------------------------
   Painel — cartões e gráficos.
   As cores saem das variáveis do MudBlazor (--mud-palette-*), e não de valores
   fixos: assim o painel acompanha o tema claro/escuro sem uma segunda paleta.
   --------------------------------------------------------------------------- */

/* O cartão é uma coluna: topo (ícone + números) em cima, link colado embaixo.
   O `margin-top:auto` do link é o que deixa os "Abrir ›" de todos os cartões na
   mesma altura mesmo quando um deles tem três linhas de detalhe e o vizinho tem
   uma — sem isso o link sobe junto com o texto e a fileira fica desalinhada.

   `container-type` faz o cartão medir a si mesmo: os cartões do painel dividem a
   fileira em seis, e a largura de cada um não tem relação com a da janela — é o
   ponto que uma media query erra. */
.emsoft-resumo {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.emsoft-resumo__topo {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.emsoft-resumo__numeros {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.emsoft-resumo__icone {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* O valor acompanha a largura do cartão em vez de estourá-la: "R$ 400,00 · 1,00 h"
   não cabe em 1.25rem num cartão de 180px, e o `nowrap` de antes o empurrava para
   fora, arrastando o resto do conteúdo. */
.emsoft-resumo__valor {
    font-weight: 600;
    letter-spacing: -.02em;
    /* A primeira linha é o que vale onde `cqi` não existe — a declaração seguinte
       é descartada inteira pelo navegador antigo, e não o tamanho do valor. */
    font-size: 1.25rem;
    font-size: clamp(1rem, 9cqi, 1.25rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.emsoft-resumo__link {
    margin-top: auto;
    padding-top: .5rem;
    align-self: flex-start;
}

/* Estreito demais para ícone e números lado a lado: o ícone sobe, e o texto passa
   a ter a largura inteira em vez de quebrar em cinco linhas. */
@container (max-width: 200px) {
    .emsoft-resumo__topo {
        flex-direction: column;
        gap: .5rem;
    }
}

/* --- rosca --- */

.emsoft-rosca {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.emsoft-rosca__figura {
    position: relative;
    flex: none;
}

.emsoft-rosca__figura svg {
    display: block;
    width: 100%;
    height: 100%;
}

.emsoft-rosca__trilho {
    stroke: var(--mud-palette-lines-default);
}

.emsoft-rosca__centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.emsoft-rosca__valor {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.emsoft-rosca__total {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

.emsoft-rosca__legenda {
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.emsoft-rosca__item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.emsoft-rosca__ponto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex: none;
}

.emsoft-rosca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.emsoft-rosca__rotulo {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.emsoft-rosca__numero {
    font-size: .82rem;
    font-weight: 500;
}

/* --- área/linha --- */

.emsoft-area {
    display: flex;
    gap: .5rem;
}

.emsoft-area__eixo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    min-width: 44px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1;
}

.emsoft-area__figura {
    flex: 1;
    min-width: 0;
}

.emsoft-area__figura svg {
    display: block;
    width: 100%;
}

.emsoft-area__grade {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.emsoft-area__rotulos {
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}

/* --- lista de vencimentos --- */

.emsoft-vencimento {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.emsoft-vencimento:last-child {
    border-bottom: none;
}

.emsoft-vencimento__data {
    width: 44px;
    flex: none;
    text-align: center;
    line-height: 1.1;
}

.emsoft-vencimento__dia {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
}

.emsoft-vencimento__mes {
    display: block;
    font-size: .65rem;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* --- barra comparativa --- */

.emsoft-barra {
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.emsoft-barra__preenchimento {
    height: 100%;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Diálogo de ajuda por tela (CabecalhoPagina + AjudaDialogo).
   Global, e não CSS isolado (.razor.css): o conteúdo de cada ajuda é escrito
   na própria página (Cidades.razor, Clientes.razor…) e passado como
   RenderFragment — o isolamento do Blazor marca esses elementos com o escopo
   de quem os DECLAROU no .razor, não o do componente que os hospeda, então um
   seletor `::deep` no AjudaDialogo nunca os alcança. CSS global não tem essa
   limitação. Linguagem visual inspirada num modelo de central de ajuda: fundo
   claro, selos circulares com ícone, itens numerados em vez de bullet cru,
   cartão de suporte no rodapé — adaptada à cor da marca (azul).
   --------------------------------------------------------------------------- */

.emsoft-ajuda-dialogo {
    border-radius: 16px;
    overflow: hidden;
}

.emsoft-ajuda-dialogo .mud-dialog-title {
    padding: 0;
    margin: 0;
}

.emsoft-ajuda-cabecalho {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.emsoft-ajuda-icone {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover, rgba(31, 111, 235, .12));
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.emsoft-ajuda-icone--pequeno {
    width: 38px;
    height: 38px;
}

.emsoft-ajuda-titulos {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.emsoft-ajuda-titulo {
    font-weight: 700;
    line-height: 1.3;
}

.emsoft-ajuda-subtitulo {
    color: var(--mud-palette-text-secondary);
}

.emsoft-ajuda-fechar {
    flex: none;
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .05));
}

/* Faixa "Bem-vindo!" — fixa, mesma em toda ajuda; só o nome da tela muda. */

.emsoft-ajuda-boas-vindas {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1.25rem 1.5rem 0;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg,
        var(--mud-palette-primary-hover, rgba(31, 111, 235, .1)) 0%,
        var(--mud-palette-info-hover, rgba(77, 166, 255, .08)) 100%);
}

.emsoft-ajuda-icone--boas-vindas {
    width: 38px;
    height: 38px;
    background: var(--mud-palette-surface, #fff);
}

/* Corpo: o parágrafo de introdução de cada ajuda fica solto — o destaque em
   caixa virou a faixa de boas-vindas acima. */

.emsoft-ajuda-corpo {
    padding: 1.25rem 1.5rem 0;
}

.emsoft-ajuda-corpo .mud-typography-body1 {
    line-height: 1.65;
    margin-bottom: .25rem;
}

/* Cada <li> vira um item numerado em círculo — contador CSS, não numeração
   escrita à mão: as ajudas já redigidas ganham o visual sem precisar mudar
   uma linha do texto. */

.emsoft-ajuda-corpo ul {
    list-style: none;
    counter-reset: emsoft-ajuda-item;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.emsoft-ajuda-corpo li {
    counter-increment: emsoft-ajuda-item;
    position: relative;
    padding-left: 2.75rem;
    min-height: 1.85rem;
    line-height: 1.6;
}

.emsoft-ajuda-corpo li::before {
    content: counter(emsoft-ajuda-item);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text, #fff);
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Categoria do item, opcional: por padrão o círculo é azul (neutro/"como
   funciona"). Quatro classes cobrem qualquer conteúdo de ajuda, não só CRUD —
   dica que facilita, cuidado que exige atenção, ou algo que o sistema restringe. */

.emsoft-ajuda-corpo li.emsoft-item-positivo::before {
    background: var(--mud-palette-success);
}

.emsoft-ajuda-corpo li.emsoft-item-atencao::before {
    background: var(--mud-palette-warning);
}

.emsoft-ajuda-corpo li.emsoft-item-restricao::before {
    background: var(--mud-palette-error);
}

.emsoft-ajuda-corpo b {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.emsoft-ajuda-corpo code {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .06));
    padding: .1rem .4rem;
    border-radius: 6px;
    font-family: 'Cascadia Mono', Consolas, 'Courier New', monospace;
    font-size: .85em;
}

/* Texto secundário (a "nota" no fim de uma ajuda) vira um pequeno cartão. */

.emsoft-ajuda-corpo .mud-typography-body2.mud-text-secondary {
    margin: 0 0 1.25rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, .035));
    font-size: .8125rem;
    line-height: 1.55;
}

/* Rodapé fixo "precisa de ajuda?" — mesmo padrão de selo do cabeçalho, cor de
   destaque suave para separar do conteúdo específico da tela. */

.emsoft-ajuda-rodape {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 1.5rem 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: var(--mud-palette-primary-hover, rgba(31, 111, 235, .08));
}

.emsoft-ajuda-rodape-titulo {
    font-weight: 600;
}

/* Calendário de Chamados (/servicos/chamados/calendario). Grid CSS, não
   MudGrid/MudItem: 7 colunas fixas por linha, independente de quantos dias a
   grade tiver — MudItem "xs=true" divide por todos os itens da LINHA mudgrid,
   o que exigiria quebrar manualmente a cada 7 células. */
.emsoft-calendario-grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.emsoft-calendario-dia-semana {
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    padding: 4px 0;
}

.emsoft-calendario-dia {
    min-height: 78px;
    padding: 4px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor: pointer;
}

.emsoft-calendario-dia:hover {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .04));
}

/* Dia de preenchimento do mês/período vizinho, só para fechar a grade em
   semanas inteiras — ainda mostra os chamados dele (podem ser reais), mas
   visualmente recuado para não competir com o período escolhido. */
.emsoft-calendario-dia-fora {
    opacity: .45;
}

.emsoft-calendario-dia-hoje {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
}

.emsoft-calendario-dia-com-chamado {
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, .02));
}

.emsoft-calendario-numero {
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.emsoft-calendario-linha {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    line-height: 1.3;
}

.emsoft-calendario-linha .mud-icon-root {
    font-size: 1rem;
}

.emsoft-calendario-atrasado {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.emsoft-calendario-encerrado {
    color: var(--mud-palette-success);
}

.emsoft-calendario-aberto {
    color: var(--mud-palette-info);
}

/* Tarefa própria vs. de outra pessoa (pública) — mesmo ícone, cor diferente,
   para separar de relance "o que é meu" de "aviso de outro time" sem abrir o
   dia. Atrasada de outra pessoa usa âmbar, não vermelho: vermelho fica
   reservado para "eu preciso agir", que é só a atrasada da própria pessoa
   (classe .emsoft-calendario-atrasado, compartilhada com chamados). */
.emsoft-calendario-tarefa-minha {
    color: var(--mud-palette-info);
}

.emsoft-calendario-tarefa-outro {
    color: var(--mud-palette-text-secondary);
}

.emsoft-calendario-tarefa-outro-atrasada {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

/* Domingo e feriado nacional (Comum/Feriados.cs) — faixa à esquerda em vez de
   fundo cheio, para não brigar com .emsoft-calendario-dia-com-chamado (que já
   usa um fundo sutil); as duas convivem sem uma apagar a outra. */
.emsoft-calendario-dia-domingo {
    border-left: 3px solid var(--mud-palette-error);
}

.emsoft-calendario-dia-feriado {
    border-left: 3px solid var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), .08);
}

.emsoft-calendario-feriado-nome {
    font-size: .68rem;
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
    line-height: 1.2;
}