/* ==========================================================================
Verniz visual das telas Blazor de ESCRITÓRIO do sis (claro/escuro).
Baseado no Cadastro de Pessoas do WPF (design "clean/moderno"): campos com
leve fundo cinza + borda fina, campo desabilitado/readonly mais escuro,
campo em foco/edição com borda de acento, e grid com cabeçalho diferenciado,
zebra, hover e linha selecionada com faixa de acento.
Usa APENAS as CSS custom properties publicadas pelo MudThemeProvider
(--mud-palette-*), então tudo segue o tema ATIVO — verde no claro, verde
clareado no escuro — sem cor cravada. As paletas moram em SisThemes.cs.
POR QUE aqui e não em .razor.css: os bundles de CSS isolado
({Assembly}.styles.css) NÃO são referenciados por nenhum host (nem o
index.html do BlazorWebView, nem o do WASM), então estilo isolado não
carrega. Este arquivo é asset global da RCL, servido em
_content/Sis.Presentation.Erp.Components/sis-theme.css e ligado no
de cada host — é onde o CSS compartilhado de fato entra em vigor.
========================================================================== */
/* -------------------------------------------------------------------------
Fonte da interface: Inter (moderna/elegante), SELF-HOSTED — o woff2 é asset
da RCL (wwwroot/fonts), servido em _content/.../fonts. É a garantia de
OFFLINE do app local (WPF/MAUI): a fonte vem do próprio app, não do Google
Fonts (CDN), então funciona sem internet; na web serve do mesmo lugar. É um
arquivo variável (todos os pesos num só). URL relativa a este CSS.
Inter é SIL Open Font License — livre para empacotar.
------------------------------------------------------------------------- */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900; /* variável: cobre todos os pesos */
font-display: swap; /* pinta com a fallback e troca — nunca texto invisível */
src: url("fonts/InterVariable.woff2") format("woff2");
}
/* Aplica a Inter em toda a interface (MudBlazor lê --mud-typography-*-family da
tipografia em SisThemes; isto cobre o resto — body, texto solto, HTML puro).
A stack de sistema (Segoe UI/Roboto/-apple-system) é a fallback enquanto a
Inter carrega ou se, por algum motivo, o asset não estiver presente. */
html, body, .mud-typography, .mud-input, .mud-button-root, .mud-nav-link {
font-family: "Inter", "Segoe UI", "Roboto", -apple-system, "Helvetica", "Arial", sans-serif;
}
/* -------------------------------------------------------------------------
Campos (MudTextField/MudSelect Outlined, o default global do AddSisUi)
------------------------------------------------------------------------- */
/* Campo habilitado: leve fundo cinza dentro da borda, como no WPF.
O preenchimento é DERIVADO da paleta ativa (uma pitada do texto primário
misturada à superfície), NÃO de --mud-palette-gray-light. Motivo: essa
variável NÃO acompanha o modo do jeito que o nome sugere — no claro vale
#F5F5F5 (o cinza sutil que este verniz queria) e no ESCURO vale #BDBDBD, ou
seja cinza CLARO. Nos temas escuros (Food do restaurante, Channel, o Dark
canônico da casca, DashboardDark) todo campo virava um bloco cinza claro com
texto claro por cima — ilegível. Era o que se via no login e na busca do app
do garçom.
Os 6% são calibrados para NÃO mexer no que já existia: sobre a superfície
branca do tema claro dão ~#F2F2F2, praticamente o #F5F5F5 de antes; sobre a
superfície #1E1E1E do escuro dão ~#2A2A2A, um degrau acima do fundo, com o
texto #E8E8E8 por cima. Um mesmo valor fixo não serviria aos dois — é por
isso que a cor é derivada, e não cravada. */
.mud-input.mud-input-outlined:not(.mud-disabled) .mud-input-slot {
background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
}
/* Campo desabilitado ou readonly: fundo visivelmente mais escuro (ex.: Cidade
e UF derivados da busca no cadastro) — a diferença habilitado x desabilitado
fica inequívoca, não um tom quase idêntico. */
.mud-input.mud-input-outlined.mud-disabled .mud-input-slot,
.mud-input.mud-input-outlined .mud-input-slot[readonly] {
background-color: var(--mud-palette-action-disabled-background);
}
/* Campo em foco/edição: borda de acento (verde) mais grossa — equivale ao
realce do campo em edição do cadastro WPF. */
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
border-width: 2px !important;
border-color: var(--mud-palette-primary) !important;
}
/* -------------------------------------------------------------------------
Casca (ShellLayout): barra superior e menu lateral NAVY, espelhando o shell
WPF nos dois temas. As cores navy vêm da paleta (--mud-palette-appbar/drawer-*,
definidas em SisThemes: #10293F/#1B374E no claro, navy escuro no escuro).
Aqui ficam as PROPORÇÕES e os ESTADOS (hover/ativo), que a paleta não expressa.
------------------------------------------------------------------------- */
/* Logo da SoftConn no CENTRO da barra superior (decisão do dono, 2026-07-27).
Altura fixa e `width: auto`: a MudAppBar tem altura fixa e o arquivo tem 644px de largura — sem travar a
altura, a imagem empurra a barra inteira. `object-fit: contain` preserva a proporção qualquer que seja o
arquivo, então trocar o logo por outro de proporção diferente não obriga a mexer aqui.
`pointer-events: none`: o logo é marca, não botão. Sem isto ele intercepta o clique que passa pela faixa
central da barra, e um logo que não faz nada ao ser clicado é indistinguível de um botão quebrado. */
.sis-shell-logo {
/* 54px numa barra de 64px — 5px de respiro de cada lado. O arquivo é 1317×620 (proporção ~2,12:1), então
isto o desenha com ~115px de largura; é a altura, e não a largura, que decide se a palavra "SoftConn"
dentro da marca é legível.
A primeira tentativa foi 28px e o logo virou uma mancha colorida: a marca ficou lá e não se lia. 42px
resolveu isso e ainda ficava pequeno na tela do cliente (dono, 2026-08-18) — a barra tem 64px e sobrava
espaço vertical dos dois lados sem nada dentro. ⛔ Não passe de 54px: acima disso a imagem encosta na
borda da MudAppBar e o corte aparece antes de a marca ficar maior. */
height: 54px;
width: auto;
max-width: 300px;
object-fit: contain;
pointer-events: none;
user-select: none;
}
/* Menu lateral: texto e ícones claros sobre o navy; hover e item ativo com
realce translúcido branco (como o WPF), não a primária verde. */
.sis-shell-drawer .mud-navmenu .mud-nav-link,
.sis-shell-drawer .mud-navmenu .mud-nav-group .mud-nav-link {
color: rgba(255, 255, 255, 0.82);
}
.sis-shell-drawer .mud-navmenu .mud-nav-link .mud-icon-root,
.sis-shell-drawer .mud-navmenu .mud-nav-link-expand-icon {
color: rgba(255, 255, 255, 0.7);
}
.sis-shell-drawer .mud-navmenu .mud-nav-link:hover {
background-color: rgba(255, 255, 255, 0.10);
color: #fff;
}
.sis-shell-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
background-color: rgba(255, 255, 255, 0.16);
color: #fff;
font-weight: 600;
}
.sis-shell-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
color: #fff;
}
/* Busca do menu sobre o navy: fundo translúcido e texto claro, sobrescrevendo
o verniz de campo de formulário (fundo cinza) que não cabe aqui. */
.sis-shell-drawer .sis-nav-busca .mud-input-slot {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #fff;
}
.sis-shell-drawer .sis-nav-busca .mud-input-outlined-border {
border-color: rgba(255, 255, 255, 0.25) !important;
}
.sis-shell-drawer .sis-nav-busca input,
.sis-shell-drawer .sis-nav-busca .mud-input-adornment .mud-icon-root {
color: rgba(255, 255, 255, 0.85);
}
.sis-shell-drawer .sis-nav-busca input::placeholder {
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
/* Menu COLAPSADO (68px): ícones centrados, como o modo Compact do WPF. */
.sis-nav-mini {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
gap: 2px;
min-height: 100%;
}
.sis-nav-mini-icon.mud-icon-button {
color: rgba(255, 255, 255, 0.82);
width: 48px;
height: 48px;
}
.sis-nav-mini-icon.mud-icon-button:hover {
background-color: rgba(255, 255, 255, 0.12);
color: #fff;
}
.sis-nav-mini-spacer {
flex: 1 1 auto;
}
/* Flyout do menu colapsado (popover do MudMenu): fundo NAVY como o submenu do WPF
(não a superfície branca do tema). Usa o mesmo navy do drawer, então casa com o
menu em claro e escuro. */
.sis-nav-flyout.mud-popover {
background-color: var(--mud-palette-drawer-background);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.sis-nav-flyout .mud-menu-item {
color: rgba(255, 255, 255, 0.85);
}
.sis-nav-flyout .mud-menu-item:hover {
background-color: rgba(255, 255, 255, 0.10);
color: #fff;
}
.sis-nav-flyout .sis-nav-flyout-header {
font-weight: 700;
font-size: 0.85rem;
padding: 8px 16px 4px;
color: #fff;
}
.sis-nav-flyout .sis-nav-flyout-subheader {
font-weight: 600;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 10px 16px 2px;
color: rgba(255, 255, 255, 0.55);
}
/* -------------------------------------------------------------------------
RapidView (Painel de Acesso Rápido) — cards de atalho: efeito de hover/clique
como o CardBotao do WPF (sobe levemente + sombra + brilho ao passar o mouse,
afunda ao clicar). A cor de fundo (por módulo) vem do componente, na variável
--sis-rapid-card-bg.
⚠️ O `!important` do background NÃO é preguiça — é obrigatório. O MudBlazor
pinta o botão desabilitado com
.mud-button-filled:disabled { background-color:
var(--mud-palette-action-disabled-background) !important }
e `!important` de folha de estilo vence estilo INLINE sem `!important` (a
única situação da cascata em que o inline perde). Enquanto a cor vinha por
`style="background: …"` no componente, todo card desabilitado ficava CINZA —
e eles são desabilitados em todo head que não registra o IRapidViewLauncher,
isto é em todos menos o Web.Mock (que finge disponibilidade). Resultado
medido no head MAUI em 2026-07-27: painel inteiro sem cor, exatamente fora do
head onde se costuma olhar.
A escolha de produto: um atalho indisponível continua dizendo DE QUE MÓDULO
ele é (a cor é identidade, não estado) e diz "indisponível" por opacidade e
ausência de sombra. Apagar a cor confundia "não posso clicar" com "não
carregou".
------------------------------------------------------------------------- */
.sis-rapid-card.mud-button-root {
background-color: var(--sis-rapid-card-bg) !important;
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.sis-rapid-card.mud-button-root:disabled {
opacity: 0.55;
box-shadow: none;
}
.sis-rapid-card.mud-button-root:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
filter: brightness(1.07);
}
.sis-rapid-card.mud-button-root:active:not(:disabled) {
transform: translateY(-1px) scale(0.99);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
filter: brightness(0.98);
}
/* -------------------------------------------------------------------------
Densidade do menu lateral aproximada do WPF (item ~13px, altura enxuta). O
MudBlazor parte de 16px e espaça mais; aqui o item fica mais compacto e com
respiro vertical menor, como o SfNavigationDrawer do WPF.
------------------------------------------------------------------------- */
.sis-shell-drawer .mud-navmenu .mud-nav-link {
font-size: 0.875rem;
min-height: 40px;
padding-top: 6px;
padding-bottom: 6px;
}
/* Ícone do item um pouco menor e mais colado ao texto (WPF: ícone 22px + gap curto). */
.sis-shell-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon {
margin-right: 10px;
}
.sis-shell-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
font-size: 1.25rem;
}
/* -------------------------------------------------------------------------
SisPageHeader — ícone do cabeçalho tingido pela primária do tema ativo.
(Estava só no .razor.css isolado, que não carrega; consolidado aqui.)
Não usa --mud-palette-primary-hover pelo mesmo motivo da linha selecionada do grid: o "-hover" derivado do
HoverOpacity (~6%) some sobre o card branco. Mistura fixa da primária + contorno fino — o mesmo vocabulário
visual dos ícones de ação da linha (caixa contornada), pra a tela ter UM idioma de "ícone em caixa".
------------------------------------------------------------------------- */
.sis-page-header-icon {
width: 44px;
height: 44px;
border-radius: var(--mud-default-borderradius, 8px);
background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.24);
color: var(--mud-palette-primary);
}
/* -------------------------------------------------------------------------
Cadastro SIMPLES (poucos campos — ex.: só "Descrição" — e grade com 1-2
colunas de texto + Ações). A página ganha um TETO de largura em vez de
esticar borda a borda do monitor.
Sem isso, um cadastro trivial (Grupos de rota, Tipos de Produto,
SubGrupos...) numa tela ultrawide vira uma faixa de texto rente à
esquerda com um vão enorme até a coluna Ações — sobra de largura que
ninguém pediu, não fluidez. É TETO, não centralização: abaixo dele o
bloco continua ocupando 100% da largura disponível (tablet, celular),
e por isso não contradiz a regra de tela fluida/responsiva — só para
de crescer sem propósito quando o monitor é maior que o conteúdo.
------------------------------------------------------------------------- */
.sis-cadastro-simples {
max-width: 720px;
}
/* -------------------------------------------------------------------------
SisDataGrid — contorno, cabeçalho, hover e seleção. Tudo escopado em
.sis-data-grid, então NÃO afeta grids de outros módulos (PDV/Food).
------------------------------------------------------------------------- */
/* Foco do container de teclado (ver SisDataGrid.razor.cs, OnGridKeyDownAsync): outline sutil na cor
primária em vez do outline azul default do navegador — sinaliza "as setas navegam aqui" sem competir com
a faixa de acento da linha selecionada. Some ao perder o foco (clique fora, Tab para outro campo). */
.sis-data-grid-keyboard-host:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
border-radius: var(--mud-default-borderradius, 8px);
}
/* Contorno do grid: card com hairline + cantos arredondados do tema, no espírito do "outlined container" do
Material 3 (contorno fino carrega a delimitação; a elevação fica baixa, sem sombra pesada). O
overflow:hidden é o que faz o cabeçalho respeitar o canto arredondado — sem ele o fundo cinza do |
vaza e o canto vira um quadrado. Popover de filtro/menu do MudDataGrid não é clipado: renderiza fora,
no MudPopoverProvider. */
.sis-data-grid.mud-table {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius, 8px);
overflow: hidden;
}
/* 🔒 A SOMBRA DE ROLAGEM — o que faz a última coluna deixar de sumir sem aviso em 1024×768.
⚠️ O diagnóstico que circulava ("o SisDataGrid CORTA colunas em 1024") estava ERRADO, e a diferença muda o
conserto: medido no navegador, o `.mud-table-container` já tem `overflow-x: auto` e JÁ rola (969px de
conteúdo em 718px de caixa, na Consulta de Consignações). Nenhuma coluna é inalcançável. O que faltava era
o operador SABER que há mais à direita: `offsetHeight - clientHeight` dava ZERO, ou seja, a barra é
overlay — aparece enquanto se arrasta e some parada. Na tela isso vira uma Situação fatiada pela borda do
card e uma coluna de Ações que simplesmente não existe.
🔴 A primeira tentativa foi devolver a barra CLÁSSICA com `::-webkit-scrollbar { height }`. Ficou INERTE, e
a medição vale registrar: quando `scrollbar-width` está declarado no elemento (o MudBlazor declara `thin`),
o Chromium IGNORA os pseudo-elementos `::-webkit-scrollbar` inteiros. A regra existia no arquivo servido
(conferido por `curl`) e o `offsetHeight - clientHeight` continuou zero — o mesmo formato de defeito do
padding da grade de itens: presente, e sem efeito.
A saída é PINTURA, que não depende de como a plataforma desenha barra: quatro gradientes, dois `local`
(viajam com o conteúdo e TAPAM a sombra quando aquela ponta está à vista) e dois `scroll` (fixos na caixa,
são a sombra). O resultado é uma sombra que só aparece do lado em que há conteúdo escondido, e desaparece
sozinha na consulta que cabe na tela — sem uma linha de JavaScript e sem medir largura.
⛔ Não é `overflow-x: scroll`: desenharia trilho em TODA consulta do repo, inclusive nas que cabem, comendo
altura numa tela onde falta altura (a ordem de sacrifício do catálogo de design).
⛔ Também não é coluna de Ações fixa (`position: sticky`): seria mais confortável, mas exige fundo opaco na
célula e atropelaria o realce da linha selecionada e do hover, que é o outro mecanismo desta grade. Fica
registrado como possibilidade, não como omissão. */
.sis-data-grid .mud-table-container {
background-image:
linear-gradient(to right, var(--mud-palette-surface) 60%, rgba(0, 0, 0, 0)),
linear-gradient(to left, var(--mud-palette-surface) 60%, rgba(0, 0, 0, 0)),
linear-gradient(to right, color-mix(in srgb, var(--mud-palette-text-primary) 30%, transparent), rgba(0, 0, 0, 0)),
linear-gradient(to left, color-mix(in srgb, var(--mud-palette-text-primary) 30%, transparent), rgba(0, 0, 0, 0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 28px 100%, 28px 100%, 22px 100%, 22px 100%;
background-attachment: local, local, scroll, scroll;
}
/* Cabeçalho diferenciado: fundo cinza, texto secundário em caixa alta leve,
sublinha de 2px. Distingue o header do corpo sem depender de cor forte.
A sublinha usa table-lines (a mesma cor das linhas do corpo, agora legível) em vez de lines-default —
assim o cabeçalho é a MESMA linha, só mais grossa, e não uma segunda cor competindo. */
.sis-data-grid .mud-table-head th,
.sis-data-grid .mud-table-head .mud-table-cell {
background-color: var(--mud-palette-gray-light);
color: var(--mud-palette-text-secondary);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 2px solid var(--mud-palette-table-lines);
}
/* SEM zebra por padrão (decidido em 2026-07-25, junto com o reforço das linhas).
Havia aqui uma regra que listrava as linhas pares de TODO .sis-data-grid, INCONDICIONALMENTE — ela ignorava
o parâmetro `Striped` do SisDataGrid (que é false por default), então a tela não tinha como desligar a
zebra nem pedindo. Duas razões pra ela sair:
1. Enquanto a linha de separação era invisível, a zebra fazia o trabalho dela por tabela. Com o separador
legível, as duas guiam o olho pela mesma linha — Material Design pede UM dos dois, não os dois, e o
fundo uniforme devolve destaque ao hover e à seleção, que é onde a informação de estado mora.
2. Sem a regra, o parâmetro `Striped` volta a FUNCIONAR: quem passar Striped="true" recebe o listrado
nativo do MudBlazor (que usa o mesmo --mud-palette-table-striped). Deixou de ser sempre-ligado e virou
opt-in por tela, que é o que a assinatura do componente sempre prometeu.
O TableStriped continua na paleta justamente por causa do (2) — não é valor órfão. */
/* Transição do realce: a faixa "acende" em vez de piscar. É o que torna o hover perceptível mesmo quando o
mouse atravessa o grid rápido — o olho registra o movimento da cor, não só o estado final. */
.sis-data-grid .mud-table-body .mud-table-row .mud-table-cell {
transition: background-color 0.12s ease-out;
}
/* Hover: realce esverdeado (o TableHover da paleta, reforçado em SisThemes.cs — ver o comentário lá), sem
cobrir a seleção. O !important vence o sombreamento próprio do MudDataGrid, que também escreve
background-color na linha em hover e, sendo mais específico em alguns temas, apagava este realce. */
.sis-data-grid .mud-table-body .mud-table-row:hover:not(.sis-grid-row-selected) td {
background-color: var(--mud-palette-table-hover) !important;
}
/* Linha selecionada: fundo tingido com a primária + faixa de acento à esquerda.
O !important vence o sombreamento de hover/zebra do próprio MudDataGrid.
NÃO usa --mud-palette-primary-hover (o "-hover" que o MudBlazor deriva de HoverOpacity, ~6% de opacidade —
pensado pra um :hover discreto, não pra marcar "esta é a linha selecionada"). Com opacidade tão baixa, no
tema CLARO a seleção quase some sobre o branco do card — foi o que o dono reportou ("não dá pra enxergar").
Em vez disso, mistura a primária do tema ativo (--mud-palette-primary-rgb, publicada pelo MudThemeProvider)
numa opacidade fixa e mais forte, dedicada só a este estado — segue o tema (muda com Light/Dark/Food/...)
mas não depende do HoverOpacity global nem se confunde com o :hover comum de botão/menu.
Seleção x hover não competem por serem tons diferentes do mesmo verde: a seleção soma DOIS sinais que o
hover não tem — a faixa de acento de 4px e o peso da fonte. */
.sis-data-grid .mud-table-body tr.sis-grid-row-selected td {
background-color: rgba(var(--mud-palette-primary-rgb), 0.22) !important;
font-weight: 600;
}
.sis-data-grid .mud-table-body tr.sis-grid-row-selected td:first-child {
box-shadow: inset 4px 0 0 0 var(--mud-palette-primary);
}
/* Linha de separação entre registros: o MudBlazor usa var(--mud-palette-table-lines) no border-bottom de
cada célula (1px). O valor de TableLines pro tema Light era quase invisível sobre o branco do card —
reforçado em SisThemes.cs (ver o comentário lá) pra ficar claramente perceptível sem virar uma grade
pesada. Aqui só reafirma a intenção — o valor real é publicado pela paleta ativa. */
.sis-data-grid .mud-table-body .mud-table-row .mud-table-cell {
border-bottom: 1px solid var(--mud-palette-table-lines);
}
/* Última linha sem separador: quem fecha o corpo é o contorno do card. Evita a linha dupla (separador +
borda) que aparece logo acima do rodapé/paginador. */
.sis-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
border-bottom: none;
}
/* -------------------------------------------------------------------------
CÉLULA DE COBRANÇA — na consulta de Contas a Receber, o estado do boleto, o
nosso número e o banco/PSP na MESMA célula.
🔑 Uma coluna, três informações empilhadas — ⛔ não três colunas. A grade já
tem nove; em 1024×768 três colunas de cobrança empurrariam Valor e Saldo
para fora, e o operador perderia de vista o dinheiro para ganhar o número
do boleto.
A hierarquia é deliberada: o ESTADO é o chip (é o que muda e o que decide
se cabe emitir de novo); número e banco são identificação, e ficam em
secundário, menores, numa linha só.
------------------------------------------------------------------------- */
.sis-cobranca-cell {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
/* Sem o line-height curto a célula cresce ~8px e a linha inteira da grade
engorda — 50 linhas mais altas por causa de dois textos de apoio. */
line-height: 1.25;
}
.sis-cobranca-numero {
font-size: 0.75rem;
/* Tabular para o número não "dançar" entre linhas: nosso número é código,
e código desalinhado é mais difícil de conferir de olho. */
font-variant-numeric: tabular-nums;
color: var(--mud-palette-text-primary);
}
.sis-cobranca-banco {
font-size: 0.7rem;
color: var(--mud-palette-text-secondary);
}
/* -------------------------------------------------------------------------
LINHA EXPANSÍVEL — o painel que abre abaixo da linha (SisDataGrid +
SisRowDetail). O gesto é: clicar no chevron da linha e ver, ali mesmo, o
que aquele registro tem do outro lado do vínculo (os boletos do título, o
título do boleto, os itens e a cobrança do documento).
🔑 O princípio visual é UM: o painel é CONTINUAÇÃO da linha, não outro
componente. Por isso ele não tem contorno próprio, não tem sombra e não
estreia cor nenhuma — ele reusa o idioma que a grade já fala (a faixa de
acento da linha selecionada, a hairline das linhas, o tratamento do
cabeçalho). Um card dentro do card faria o olho ler "abriu outra tela".
------------------------------------------------------------------------- */
/* O botão de expandir. Discreto por padrão — ele repete em TODA linha, e um
ícone forte multiplicado por 50 linhas vira ruído que compete com o dado. */
.sis-row-detail-toggle.mud-icon-button {
color: var(--mud-palette-text-secondary);
transition: color 0.12s ease-out, transform 0.12s ease-out;
}
.sis-row-detail-toggle.mud-icon-button:hover:not(.mud-disabled) {
color: var(--mud-palette-primary);
}
/* Linha sem detalhe: apagado, NÃO ausente. Botão que some de algumas linhas faz
a coluna piscar conforme o filtro, e o operador conclui que a tela quebrou. */
.sis-row-detail-toggle.mud-icon-button.mud-disabled {
opacity: 0.28;
}
/* A célula que hospeda o painel é do PRÓPRIO MudDataGrid (ele embrulha o child row
com o colspan certo — ⛔ não emita | no fragmento, ver SisDataGrid.razor.cs).
O que se tira dela é o padding: quem respira é o painel, e o padding da célula
deixaria uma moldura clara em volta do fundo tingido.
🩸 MEDIDO numa captura: com um | próprio dentro do child row (HTML inválido —
td dentro de td), o navegador extrai o elemento e o painel para no MEIO da
largura da grade, com o fundo cortado. Build, bUnit e E2E ficavam verdes. */
.sis-data-grid .mud-table-body tr.mud-table-row-hierarchy td {
padding: 0;
}
/* O painel.
O fundo é um DEGRAU abaixo da superfície do card (color-mix com o texto
primário, ~4%), e não uma cor nova: funciona nos dois temas sem uma segunda
definição, porque as duas variáveis já invertem com o tema.
A faixa de acento à esquerda é o mesmo gesto da .sis-grid-row-selected — é ela
que faz o olho LIGAR o painel à linha que o abriu, que é a única informação
que a moldura precisa carregar. */
.sis-row-detail {
background-color: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
padding: 12px 16px 12px 20px;
}
.sis-row-detail-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Os estados de carregamento e de erro (ver SisRowDetail.razor). Linha única,
discreta: eles são transitórios e não podem empurrar o resto da grade. */
.sis-row-detail-estado {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
color: var(--mud-palette-text-secondary);
min-height: 32px;
}
.sis-row-detail-erro {
color: var(--mud-palette-error-text, var(--mud-palette-error));
}
/* Seção: cabeçalho no MESMO tratamento do cabeçalho da grade — a hierarquia sai
da repetição de um padrão que já existe na tela. */
.sis-row-detail-section-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.sis-row-detail-section-title {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
/* O contador ao lado do título: pílula neutra. ⛔ Não usa cor semântica — ele
conta linhas, não classifica nada, e cor aqui sugeriria um estado. */
.sis-row-detail-section-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 6px;
border-radius: 9px;
font-size: 0.6875rem;
font-weight: 600;
color: var(--mud-palette-text-secondary);
background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}
.sis-row-detail-section-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
}
/* O aviso que EXPLICA um conteúdo vazio. Vazio mudo é indistinguível de defeito
— é a diferença entre "a consulta falhou" e "ainda não foi faturado". */
.sis-row-detail-aviso {
margin: 0 0 6px;
font-size: 0.8125rem;
color: var(--mud-palette-text-secondary);
}
/* A tabela interna do painel: SEM contorno próprio. Ela separa por linhas com a
mesma hairline da grade, então lê-se como uma continuação dela — um segundo
card aqui empilharia duas molduras no mesmo lugar. */
.sis-row-detail-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.sis-row-detail-table th {
text-align: left;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
padding: 4px 8px;
border-bottom: 1px solid var(--mud-palette-table-lines);
white-space: nowrap;
}
.sis-row-detail-table td {
padding: 5px 8px;
border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-table-lines) 55%, transparent);
}
.sis-row-detail-table tr:last-child td {
border-bottom: none;
}
/* Dinheiro e quantidade à direita — UTILITÁRIO GLOBAL. ⛔ Aqui é `text-align`, não
`d-flex` no | : classe de layout numa célula de tabela desmonta a linha (a
cicatriz do CellClass="d-flex" no TemplateColumn), e build, bUnit e E2E ficam
verdes.
🩸 (2026-08-20) Ele era escopado em `.sis-row-detail-table` e virou global porque
as duas grafias que o repositório usava para alinhar dinheiro — `text-end` e
`text-right` — NÃO EXISTEM em CSS nenhum que os heads carregam (MudBlazor.min.css
+ este arquivo + pdv.css, e só). Medido: `grep -c` das duas neste arquivo devolvia
0, e a captura do PR #1140 mostrava os valores encostados à esquerda. Ou seja, o
alinhamento de dinheiro nas grades provavelmente nunca funcionou.
✅ (2026-08-22) A pendência acima foi RESOLVIDA — pelo lado do CSS, não reescrevendo
os arquivos. `text-right` e `text-end` passaram a EXISTIR (logo abaixo), e com isso
as 111 ocorrências espalhadas por 30 telas voltaram a alinhar de uma vez.
🔑 Por que assim, e não convertendo tela a tela: as duas grafias são o vocabulário
padrão da indústria (Bootstrap, Tailwind) e foi por isso que o repositório as
escreveu 111 vezes sozinho — fazê-las existir custa três linhas e zero risco, e
reescrever 30 telas custaria 30 recapturas para obter o MESMO pixel.
⚠️ Elas dão só o alinhamento. Em coluna de NÚMERO prefira `.sis-num`, que traz
também `nowrap` e dígitos tabulares (as casas decimais empilham na vertical). */
.sis-num {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* 🩸 (2026-08-22) O CABEÇALHO da coluna precisa destas linhas à parte, e são TRÊS níveis porque o
MudDataGrid empilha três elementos dentro do ` | ` (medido no MudBlazor.min.css 8.13.0):
`.column-header` é flex com `space-between`, e dentro dele `.sortable-column-header` tem `width:100%`
— com o filho ocupando tudo, mexer só no `justify-content` do pai não move NADA, que foi a primeira
tentativa e ficou igual na captura. Sem isto, o título fica à esquerda enquanto os números vão para a
direita: pior que não alinhar, porque parece coluna trocada. */
.sis-num .column-header {
/* ⚠️ O `!important` aqui é MEDIÇÃO, não preguiça: sem ele a regra do MudBlazor vence e o cabeçalho
fica à esquerda — conferido em três capturas seguidas, com o seletor descendente já mais específico
que o `.column-header{...}` do pacote. ⛔ Não o remova "para limpar": o efeito volta a sumir e nada
acusa (build, bUnit e E2E ficam verdes com o título torto). */
justify-content: flex-end !important;
}
.text-right,
.text-end {
text-align: right;
}
/* Mesma história, medida junto: `text-center` era usada em 8 lugares e também não existia em CSS
nenhum — o MudBlazor declara as `align-*` (flexbox), e nenhuma das `text-*`. */
.text-center {
text-align: center;
}
/* Rodapé de totais da seção: separado por uma linha um pouco mais firme, para o
olho parar ali sem precisar de negrito em tudo. */
.sis-row-detail-total {
border-top: 2px solid var(--mud-palette-table-lines);
font-weight: 600;
}
/* Em telas estreitas (1024×768 é o piso das capturas) a tabela do painel rola
sozinha, em vez de empurrar a grade inteira para a horizontal. */
.sis-row-detail-scroll {
overflow-x: auto;
}
/* -------------------------------------------------------------------------
SisRowActions — ícones de ação (editar/excluir) na linha do grid. Cores
centralizadas AQUI: mude estas regras e TODO grid do sis (qualquer tela
que usa SisRowActions) muda junto — é o "tema global" dos ícones de
ação, deliberadamente desacoplado do Color.Primary/Error do MudBlazor
(que também pinta botão Salvar, chip de status etc. — mudar só a ação de
linha não deve mexer no resto da tela, e vice-versa).
.sis-row-action é a FORMA (caixa contornada, comum aos dois); as classes
-edit/-delete são só a COR. Separar as duas é o que permite acrescentar uma
terceira ação amanhã sem repetir a geometria.
------------------------------------------------------------------------- */
/* Espaçamento entre as caixas: um respiro maior que o gap-1 (4px) do utilitário,
pra os contornos não encostarem e virarem uma barra só. */
.sis-row-actions {
gap: 6px;
}
/* A caixa: contorno fino no cinza de linha do tema, canto arredondado do tema e um quadrado justo em volta
do ícone. Fundo transparente em repouso (o contorno já delimita) — a cor entra no hover, então a linha do
grid não fica poluída por dois blocos coloridos em cada registro. */
.sis-row-action.mud-icon-button {
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius, 8px);
width: 30px;
height: 30px;
padding: 0;
background-color: transparent;
transition: background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out,
transform 0.1s ease-out;
}
.sis-row-action.mud-icon-button .mud-icon-root {
font-size: 1.05rem;
}
/* Clique: a caixa afunda. Par do hover colorido definido junto das cores, mais abaixo — juntos formam a
"elevação de estado" do Material (repouso → hover eleva → :active afunda), sem exagero. */
.sis-row-action.mud-icon-button:active:not(.mud-disabled) {
transform: scale(0.94);
box-shadow: none;
}
/* Contorno apagado quando desabilitado: a caixa não pode parecer clicável se a ação não está disponível. */
.sis-row-action.mud-icon-button.mud-disabled {
border-color: var(--mud-palette-action-disabled-background);
}
.sis-row-action-edit.mud-icon-button {
color: var(--mud-palette-primary);
}
/* Ver detalhe: cor INFO — leitura pura, não pode disputar com Editar (primary) nem parecer destrutiva. E a
classe é PRÓPRIA (não reusa a -edit) porque o SeletorDeTesteConventionTests exige seletor de teste sem
ambiguidade: os E2E selecionam .sis-row-action-edit esperando o SisRowActions. Só a COR; a caixa vem da
.sis-row-action, comum a todas. */
.sis-row-action-view.mud-icon-button {
color: var(--mud-palette-info);
}
/* Tornar permanente (consolidar importação): cor SUCCESS — ação protetiva, não destrutiva nem de edição.
Classe PRÓPRIA pela mesma regra da -view: o SeletorDeTesteConventionTests exige seletor sem ambiguidade,
e os E2E selecionam .sis-row-action-edit esperando o SisRowActions. Só a COR; a caixa vem da
.sis-row-action. */
.sis-row-action-lock.mud-icon-button {
color: var(--mud-palette-success);
}
.sis-row-action-view.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-info-rgb), 0.12);
border-color: var(--mud-palette-info);
box-shadow: 0 1px 3px rgba(var(--mud-palette-info-rgb), 0.28);
}
.sis-row-action-edit.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
border-color: var(--mud-palette-primary);
box-shadow: 0 1px 3px rgba(var(--mud-palette-primary-rgb), 0.28);
}
/* Imprimir em PDF: cor SECUNDÁRIA, não primária. A ação convive com "Editar" na mesma linha e as duas são
não-destrutivas — pintar as duas de primary tiraria de "Editar" o posto de ação principal da linha. E não
é error: imprimir não destrói nada. Só a COR muda; a caixa vem da .sis-row-action, comum às três. */
.sis-row-action-print.mud-icon-button {
color: var(--mud-palette-secondary);
}
.sis-row-action-print.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
border-color: var(--mud-palette-secondary);
box-shadow: 0 1px 3px rgba(var(--mud-palette-secondary-rgb), 0.28);
}
/* CUPOM (a via de bobina): a MESMA cor secundária de "Imprimir em PDF", e é deliberado — os dois são o mesmo
gesto (entregar um documento da venda) em formatos diferentes, e cores distintas sugeririam consequências
distintas. O que os separa é o ícone, que é onde a diferença de fato está. */
.sis-row-action-receipt.mud-icon-button {
color: var(--mud-palette-secondary);
}
.sis-row-action-receipt.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
border-color: var(--mud-palette-secondary);
box-shadow: 0 1px 3px rgba(var(--mud-palette-secondary-rgb), 0.28);
}
/* Registrar PAGAMENTO (liquidar o boleto e baixar o título): cor SUCCESS — o dinheiro entrou, e ela divide a
linha com "Baixar sem pagamento" (error), que é a operação de desfecho OPOSTO. Vestir as duas da mesma cor
convidaria ao clique errado justamente onde ele custa dinheiro.
E a classe é PRÓPRIA (não reusa a -edit, que tem a mesma família de "operação normal") pela regra do
SeletorDeTesteConventionTests: os E2E selecionam .sis-row-action-edit esperando o SisRowActions, e aplicá-la
aqui tornaria o seletor deles ambíguo. Só a COR; a caixa vem da .sis-row-action. */
.sis-row-action-settle.mud-icon-button {
color: var(--mud-palette-success);
}
.sis-row-action-settle.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-success-rgb), 0.12);
border-color: var(--mud-palette-success);
box-shadow: 0 1px 3px rgba(var(--mud-palette-success-rgb), 0.28);
}
/* Ação que TRANSMITE a uma autoridade externa — INFO, não primary: é ação de peso, e a cor primária a
colocaria no mesmo degrau visual de editar, que é a do dia a dia. A geometria vem toda de `.sis-row-action`.
⚠️ O nome diz "fiscal" por origem: a classe nasceu para o ícone de classificação fiscal do catálogo de
produtos, removido em 2026-08-17. Quem a usa hoje é o "Emitir no banco" da tela de Boletos, que a escolheu
DE PROPÓSITO (o comentário lá explica: mandar o boleto ao banco é transmitir documento a terceiro, como a
NF-e). ⛔ Não a apague junto com o `OnFiscal` do SisRowActions — aquele slot morreu, esta regra não: ela é
aplicada direto no markup, e `grep` só em *.css não a encontra. */
.sis-row-action-fiscal.mud-icon-button {
color: var(--mud-palette-info);
}
.sis-row-action-fiscal.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-info-rgb), 0.12);
border-color: var(--mud-palette-info);
box-shadow: 0 1px 3px rgba(var(--mud-palette-info-rgb), 0.28);
}
/* Estornar: cor de AVISO — o degrau que a ação realmente ocupa, entre o não-destrutivo (editar/imprimir) e o
destrutivo (excluir). Estorno não apaga nada: registra o movimento CONTRÁRIO e preserva a trilha. Mas mexe
em dinheiro já lançado e não é rotina. Pintá-la de error a confundiria com excluir; de primary, com editar.
Só a COR muda; a caixa vem da .sis-row-action, comum a todas. */
.sis-row-action-reverse.mud-icon-button {
color: var(--mud-palette-warning);
}
.sis-row-action-reverse.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-warning-rgb), 0.12);
border-color: var(--mud-palette-warning);
box-shadow: 0 1px 3px rgba(var(--mud-palette-warning-rgb), 0.28);
}
/* Corrigir QUANTIDADE: cor primária, a mesma família de editar — é alteração do que já está lançado, não
destruição nem afirmação. Ícone diferente basta para distinguir os dois gestos; pintá-la de outra cor
sugeriria uma consequência que ela não tem. Só a COR muda; a caixa vem da .sis-row-action. */
/* Desconto e acréscimo da LINHA: as mesmas cores que os totais usam para os dois sinais (vermelho abate,
âmbar cobra), para o operador ler o mesmo significado na linha e no resumo. Âmbar e não verde porque a
primária do sis É verde, e um acréscimo verde ficaria com a cor do botão que fecha a venda. */
.sis-row-action-discount.mud-icon-button {
color: var(--mud-palette-error);
}
.sis-row-action-discount.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-error-rgb), 0.12);
border-color: var(--mud-palette-error);
box-shadow: 0 1px 3px rgba(var(--mud-palette-error-rgb), 0.28);
}
.sis-row-action-surcharge.mud-icon-button {
color: var(--mud-palette-warning);
}
.sis-row-action-surcharge.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-warning-rgb), 0.12);
border-color: var(--mud-palette-warning);
box-shadow: 0 1px 3px rgba(var(--mud-palette-warning-rgb), 0.28);
}
.sis-row-action-quantity.mud-icon-button {
color: var(--mud-palette-primary);
}
.sis-row-action-quantity.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
border-color: var(--mud-palette-primary);
box-shadow: 0 1px 3px rgba(var(--mud-palette-primary-rgb), 0.28);
}
/* CANCELAR: cor de AVISO, o mesmo degrau do estorno — encerra o documento e preserva o histórico, sem
apagar nada. Pintá-la de error a igualaria a excluir, que é justamente a distinção que o ícone próprio
existe para carregar. Só a COR muda; a caixa vem da .sis-row-action. */
.sis-row-action-cancel.mud-icon-button {
color: var(--mud-palette-warning);
}
.sis-row-action-cancel.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-warning-rgb), 0.12);
border-color: var(--mud-palette-warning);
box-shadow: 0 1px 3px rgba(var(--mud-palette-warning-rgb), 0.28);
}
/* Eleger como PADRÃO: cor de sucesso. É a única ação da coluna que AFIRMA algo em vez de alterar ou desfazer —
e não é destrutiva nem rotina, então nem primary (que a igualaria a editar) nem warning (que sugeriria
risco). Usa color-mix e não `--mud-palette-success-rgb` porque essa variável não existe no tema: a forma
-rgb só está definida para primary/info/warning/error. Só a COR muda; a caixa vem da .sis-row-action. */
.sis-row-action-default.mud-icon-button {
color: var(--mud-palette-success);
}
.sis-row-action-default.mud-icon-button:hover:not(.mud-disabled) {
background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
border-color: var(--mud-palette-success);
box-shadow: 0 1px 3px color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}
.sis-row-action-delete.mud-icon-button {
color: var(--mud-palette-error);
}
.sis-row-action-delete.mud-icon-button:hover:not(.mud-disabled) {
background-color: rgba(var(--mud-palette-error-rgb), 0.12);
border-color: var(--mud-palette-error);
box-shadow: 0 1px 3px rgba(var(--mud-palette-error-rgb), 0.28);
}
/* -------------------------------------------------------------------------
SisCrudToolbar — largura do campo de busca: fixa no desktop (não engole a
barra), fluida no celular.
Estava só no .razor.css isolado, que NÃO carrega em host nenhum (mesmo
motivo do SisPageHeader acima) — ou seja, a regra nunca chegou a valer e a
busca esticava. Consolidado aqui, onde de fato entra em vigor.
------------------------------------------------------------------------- */
.sis-crud-toolbar .sis-crud-toolbar-search {
max-width: 360px;
min-width: 200px;
flex: 1 1 auto;
}
/* -------------------------------------------------------------------------
Foco visível por teclado (acessibilidade + acabamento moderno).
:focus-visible só acende na navegação por TECLADO — o clique de mouse não
deixa o anel para trás. Sem isso, quem usa Tab (o operador de ERP passa o
dia nisso — ver "Teclado e navegação" no CLAUDE.md) não enxerga onde está,
porque o outline default do browser é apagado pelo reset do MudBlazor.
------------------------------------------------------------------------- */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-table-row:focus-visible {
outline: 2px solid rgba(var(--mud-palette-primary-rgb), 0.6);
outline-offset: 2px;
}
/* Sobre a casca navy o verde some — ali o anel é branco. */
.sis-shell-drawer .mud-nav-link:focus-visible,
.sis-nav-mini-icon.mud-icon-button:focus-visible {
outline-color: rgba(255, 255, 255, 0.75);
}
/* -------------------------------------------------------------------------
Barra de rolagem.
O MudThemeProvider já injeta um bloco ::-webkit-scrollbar (8px, thumb em
--mud-palette-lines-inputs) — cobre Chromium e o WebView2 do host WPF. Aqui
ficam só as DUAS coisas que faltam ou destoam:
1. Firefox não lê ::-webkit-scrollbar e o MudBlazor não emite os equivalentes
padronizados — sem isto, no Firefox a barra é a gorda do sistema.
2. O bloco do MudBlazor usa `border-radius: 1px` (thumb praticamente
quadrado) e `cursor: crosshair` sobre a barra. O !important é necessário
porque aquele |