/* ========================================================================== 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 { /* 42px numa barra de 64px. O arquivo é 1317×620 (proporção ~2,12:1), então isto o desenha com ~89px de largura — e é a altura, 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. */ height: 42px; width: auto; max-width: 240px; 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). ------------------------------------------------------------------------- */ /* 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; } /* 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; } /* ------------------------------------------------------------------------- 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); } .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); } /* Classificação fiscal — INFO, não primary: é ação de configuração, e a cor primária a colocaria no mesmo peso visual de editar, que é a ação do dia a dia. A geometria vem toda de `.sis-row-action`. */ .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); } /* 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