/* Estilo dos componentes compartilhados (Noctua.Componentes): tokens de tema, painel lateral, barra de ações,
   cartão, chip, diálogo de confirmação e utilitários que eles usam. Cada aplicativo carrega este arquivo antes do seu. */

/* Toolbar de tabela — linha separadora abaixo do título */
.mud-table .mud-toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Wrapper padrão de página — limita largura e alinha à esquerda */
.pagina-conteudo {
    max-width: 1200px;
}

.mud-input-outlined {
    background-color: var(--mud-palette-surface) !important;
}

/* Outlined desabilitado — fundo diferenciado (MudBlazor só muda a borda, insuficiente) */
    .mud-input-outlined.mud-disabled {
        background-color: var(--mud-palette-action-disabled-background) !important;
        border-radius: var(--mud-default-borderradius);
    }

.pagina-conteudo.pagina-conteudo-sm {
    max-width: 760px;
}

.pagina-conteudo.pagina-conteudo-md {
    max-width: 840px;
}

.pagina-conteudo.pagina-conteudo-lg {
    max-width: 960px;
}

.pagina-conteudo.pagina-conteudo-xl {
    max-width: 1040px;
}

.pagina-conteudo.pagina-conteudo-full {
    max-width: 100%;
}

/* Card padrão do projeto — borda e arredondamento */
.noc-cartao {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

/* NocCartao com OnClick — cartão-linha clicável (ex.: lista de vendas no mobile) */
.noc-cartao-clicavel {
    cursor: pointer;
}

.noc-cartao-clicavel:hover {
        background: var(--mud-palette-background-gray);
    }

/* Cartão marcado numa seleção por toque (mesma borda dos ciclos de Assinatura); o anel não desloca o conteúdo */
.noc-cartao-marcado {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* Labels de input — cinza secundário (MudBlazor não expõe cor de label via tema) */
.mud-input-label {
    color: var(--mud-palette-text-secondary) !important;
}

/* Overline — cor secundária por padrão (tema não expõe cor por tipografia) */
.mud-typography-overline {
    color: var(--noc-cor-texto-terciario);
}

/* Estilo padrão de botão de processar */
.noc-botao-processar {
    text-transform: none;
    font-weight: 600;
}

/* Botões outlined default — borda e texto alinhados ao design (MudBlazor não expõe via tema) */
.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}

/* Tabelas — borda e arredondamento global */
.mud-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

/* Painel lateral (NocPainelLateral) — largura fixa em telas maiores, 100% em mobile.
   MudDrawer calcula a largura via var(--mud-drawer-width, var(--mud-drawer-width-right));
   sem o parâmetro Width, a --mud-drawer-width fica indefinida e cai no fallback do drawer
   de navegação. Definir a variável aqui evita a briga de especificidade com o CSS do MudDrawer. */
.noc-painel-lateral {
    --mud-drawer-width: 100vw;
}

@media (min-width: 600px) {
    .noc-painel-lateral {
        --mud-drawer-width: 480px;
    }
}

/* Texto com peso 700 — títulos de destaque (ex.: valores de stat card) */
.noc-texto-extra-forte {
    font-weight: 700;
}

/* Botão de texto sem uppercase (ex.: "Voltar") — MudButton aplica text-transform por padrão */
.noc-botao-sem-transform {
    text-transform: none;
}

/* Tokens sem equivalente no MudTheme — projetados de docs/design/noctua-tokens.css.
   O que TEM token do Mud não entra aqui: o MudThemeProvider já troca os --mud-palette-*
   entre PaletteLight/PaletteDark sozinho. Este bloco é só o resto. */
:root {
    --noc-cor-icone-vazio: #D8C9F5; /* --icon-empty */
    --noc-cor-texto-terciario: #9CA3AF; /* --text-3 */
    /* Roxo como TINTA (texto/ícone), não como fill. O `--mud-palette-primary` é calibrado
       para ser fundo de botão com texto branco em cima; usado como cor de texto sobre fundo
       escuro ele dá 3,5:1 e reprova em AA. É o `--primary-soft-fg` do Design, que não tem
       slot equivalente no MudTheme. */
    --noc-cor-primario-tinta: #6D28D9; /* --primary-soft-fg */
    --noc-cor-veu: rgba(20, 16, 40, .38); /* véu do bottom sheet */
    --noc-sombra-folha: 0 -8px 24px rgba(0, 0, 0, .16);
    --noc-sombra-barra: 0 -4px 16px rgba(0, 0, 0, .08);
    --noc-fonte-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* --font-mono do Design */
    /* Aviso (NocAviso): borda, anel e tinta do ícone por tom. O erro usa --mud-palette-error no ícone. */
    --noc-cor-erro-borda: #FECACA; /* --danger-border */
    --noc-cor-erro-fundo: #FEE2E2; /* --danger-bg */
    --noc-cor-atencao-borda: #FDE68A; /* --warning-border */
    --noc-cor-atencao-fundo: #FFFBEB; /* --warning-bg */
    --noc-cor-atencao-forte: #B45309; /* --warning-strong */
    --noc-cor-info-borda: #BFDBFE; /* --info-border */
    --noc-cor-info-fundo: #DBEAFE; /* --info-bg */
    --noc-cor-info-forte: #1D4ED8; /* --info-strong */
    --noc-cor-sucesso-borda: #BBF7D0; /* --success-border */
    --noc-cor-sucesso-fundo: #DCFCE7; /* --success-bg */
    --noc-cor-sucesso-forte: #15803D; /* --success-strong */
}

/* Tema escuro. Único gatilho do app: data-theme="dark" no <html>, escrito pelo
   js/tema.js (e pelo script de pré-boot do index.html, antes do primeiro paint).
   Mesmo seletor que os mocks do Design System usam. */
:root[data-theme="dark"] {
    /* Escurece o que é desenhado pelo navegador, não por nós: scrollbar nativa, seletor
       de data, autofill. O MudBlazor só aplica color-scheme nos inputs dele — sem isto a
       barra de rolagem fica clara sobre o fundo escuro. */
    color-scheme: dark;
    --noc-cor-icone-vazio: #4A3D75;
    --noc-cor-texto-terciario: #948CB4;
    --noc-cor-primario-tinta: #C9B6FA;
    /* Véu e sombras precisam ser bem mais densos no escuro: sobre fundo claro a sombra
       some, sobre fundo escuro ela é o que separa o painel do que está atrás. */
    --noc-cor-veu: rgba(0, 0, 0, .62);
    --noc-sombra-folha: 0 -8px 28px rgba(0, 0, 0, .55);
    --noc-sombra-barra: 0 -4px 18px rgba(0, 0, 0, .45);
    --noc-cor-erro-borda: rgba(251, 113, 133, .30);
    --noc-cor-erro-fundo: rgba(251, 113, 133, .14);
    --noc-cor-atencao-borda: rgba(251, 191, 36, .30);
    --noc-cor-atencao-fundo: rgba(251, 191, 36, .12);
    --noc-cor-atencao-forte: #FCD34D;
    --noc-cor-info-borda: rgba(96, 165, 250, .30);
    --noc-cor-info-fundo: rgba(96, 165, 250, .14);
    --noc-cor-info-forte: #93C5FD;
    --noc-cor-sucesso-borda: rgba(74, 222, 128, .30);
    --noc-cor-sucesso-fundo: rgba(74, 222, 128, .14);
    --noc-cor-sucesso-forte: #6EE7B7;
}

/* Aviso (NocAviso) — do mock aprovado em 08/11/2026 (docs/design/faixa-erro.md). Cor só na borda e no anel do ícone;
   título e texto em text-primary / text-secondary. Espaços pela escala do noctua-tokens.css (4/8/12/16/24/32). */
.noc-aviso { display: flex; gap: 12px; align-items: flex-start; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius); padding: 12px 12px 12px 16px; box-sizing: border-box; width: 100%; flex: none; }
.noc-aviso-erro { border-color: var(--noc-cor-erro-borda); }
.noc-aviso-atencao { border-color: var(--noc-cor-atencao-borda); }
.noc-aviso-info { border-color: var(--noc-cor-info-borda); }
.noc-aviso-sucesso { border-color: var(--noc-cor-sucesso-borda); }

.noc-aviso-icone { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: none; }
.noc-aviso-erro .noc-aviso-icone { background: var(--noc-cor-erro-fundo); color: var(--mud-palette-error); }
.noc-aviso-atencao .noc-aviso-icone { background: var(--noc-cor-atencao-fundo); color: var(--noc-cor-atencao-forte); }
.noc-aviso-info .noc-aviso-icone { background: var(--noc-cor-info-fundo); color: var(--noc-cor-info-forte); }
.noc-aviso-sucesso .noc-aviso-icone { background: var(--noc-cor-sucesso-fundo); color: var(--noc-cor-sucesso-forte); }

.noc-aviso-corpo { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.noc-aviso-titulo { margin: 0; font-weight: 600; color: var(--mud-palette-text-primary); font-size: 14px; }
.noc-aviso-texto { margin: 0; color: var(--mud-palette-text-secondary); font-size: 13px; }

/* Ações: à direita no desktop, quebram para baixo do texto quando falta largura (painel, celular). */
.noc-aviso-linha { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; flex: 1; min-width: 0; }
.noc-aviso-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.noc-btn-compacto { padding: 4px 12px; font-size: 13px; text-decoration: none; text-transform: none; }
.noc-aviso-fechar { background: transparent; border: none; color: var(--mud-palette-text-secondary); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.noc-aviso-fechar:hover { background: var(--mud-palette-action-default-hover); }

/* Lugar do aviso no painel: doca fixa entre o corpo que rola e o rodapé; a guia fica fixa no topo, abaixo do título.
   Vazias não ocupam espaço. */
.noc-painel-doca, .noc-painel-guia { padding: 12px 24px 0; flex: none; display: flex; flex-direction: column; gap: 8px; }
.noc-painel-doca:empty, .noc-painel-guia:empty { display: none; }

/* `Color="Color.Primary"` no razor compila para `mud-primary-text` com `!important`, sempre
   apontando para `--mud-palette-primary` — que no escuro reprova como cor de texto (3,5:1).
   Uma regra só redireciona todo `Color.Primary` de texto/ícone para a tinta. Não afeta fill:
   fundo roxo vem de `background`, não desta classe.

   O `:where()` é obrigatório aqui: ele tem especificidade ZERO, então o seletor efetivo é
   `.mud-primary-text` (0,1,0) — igual ao do MudBlazor, e ganha só por vir depois no cascade.
   Sem ele, `:root[data-theme="dark"] .mud-primary-text` seria (0,3,0) e passaria por cima de
   toda regra `.noc-*` que define cor de texto própria (ex.: o título branco do atalho em
   destaque, que é (0,2,0)). */
:where(:root[data-theme="dark"]) .mud-primary-text {
    color: var(--noc-cor-primario-tinta) !important;
}

/* Cabeçalho de dialog com ícone circular colorido (ex.: confirmação, receber crediário) */
.noc-dialogo-titulo {
    gap: 12px;
}

.noc-dialogo-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.noc-dialogo-icone--sucesso {
    background: var(--mud-palette-success-lighten);
}

.noc-dialogo-icone--perigo {
    background: var(--mud-palette-error-lighten);
}

.noc-dialogo-icone--primario {
    background: var(--mud-palette-primary-lighten);
}

/* Texto com respiro maior entre linhas (ex.: descrição de alerta) */
.noc-texto-linha-alta {
    line-height: 1.5;
}

/* Pontinho colorido do NocChipSituacao — precede o texto em todo chip de situação */
.noc-chip-situacao-ponto {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}

/* Menu lateral recolhido (mini) — centraliza o ícone, sem o rótulo, do item e do cabeçalho de grupo */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    justify-content: center;
}

/* Barra de ações do cabeçalho (Fatia 98): secundárias agrupadas com divisor fino, principal fora do grupo */
.noc-barra-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.noc-barra-acoes {
    flex: none;
}

/* Principal no celular: botão flutuante no canto inferior direito */
.noc-barra-acoes-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
}

/* Resumo de filtro sobre a tabela: clicar abre o painel */
.noc-resumo-filtro {
    cursor: pointer;
}

.noc-resumo-filtro > span {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
}

/* Chip de texto longo (ex.: a busca) corta com reticências em vez de passar da borda no celular */
.noc-resumo-filtro .mud-chip {
    max-width: 100%;
}

.noc-resumo-filtro .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Mais ações" do rodapé do painel lateral: o rótulo não quebra de linha no celular */
.noc-painel-mais-acoes .mud-button-root {
    white-space: nowrap;
}

/* Item perigoso (excluir) no menu "Mais ações" do painel: texto e ícone em vermelho, claro e escuro.
   O MudMenuItem monta a raiz como `mud-menu-item` (não `mud-list-item`), o ícone como `mud-menu-item-icon` e o
   texto como `mud-menu-item-text`. O MudBlazor pinta `.mud-menu-item > .mud-icon-root` (0,2,0); aqui é (0,3,0). */
.mud-menu-item.noc-acao-perigosa,
.mud-menu-item.noc-acao-perigosa .mud-menu-item-text,
.mud-menu-item.noc-acao-perigosa .mud-menu-item-icon,
.mud-menu-item.noc-acao-perigosa .mud-icon-root,
.mud-menu-item.noc-acao-perigosa .mud-typography {
    color: var(--mud-palette-error);
}