h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.pdv-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1B3A5C 0%, #2E7FEB 55%, #32BDF9 100%);
}

.pdv-login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(9, 30, 66, .35) !important;
}

/* Padrão de legibilidade de gráfico (MudBlazor 9.9 MudChart) — reclamação direta do dono
   (2026-09-02): "esses gráficos estão muito pequenos e os labels que aparecem ao passar o mouse
   são tão pequenos que eu, que tenho uma visão ótima, não consigo ver nada; as linhas de todos os
   gráficos são muito finas ... todos os gráficos do sistema estão com o mesmo problema". Rede de
   segurança em CSS pra QUALQUER MudChart do sistema (mesmo um que nasça sem passar pelo padrão
   C# em Components/Shared/GraficoPadrao.cs). Seletores confirmados inspecionando o SVG renderizado
   em produção (Playwright, /unidade-negocio/trajetoria-cumprimento e /unidade-negocio/control-tower,
   2026-09-02): eixo/tooltip usam o atributo de apresentação SVG `font-size` (não `style` inline),
   então uma regra CSS comum já vence sem precisar de !important — presentation attribute tem
   especificidade mais baixa que qualquer regra de autor. */
/* Gráficos: Apache ECharts via wwwroot/js/graficos.js (fonte, tooltip e espessura ficam lá) — sem CSS de MudChart. */

/* Barra de abas sempre por cima dos vizinhos: os itens do MudGrid do cabeçalho (Spacing=6 → caixa
   de padding 24px maior que o conteúdo) desciam sobre a metade de baixo das abas e engoliam o
   clique (achado QA r14/r15 no Control Tower, 2026-09-02; classe real da barra: .mud-tabs-tabbar). */
.mud-tabs-tabbar { position: relative; z-index: 3; }
.mud-tabs-panels { position: relative; z-index: 1; }

/* Barra de navegação do bloco Entidade (EntidadeAbas.razor): pílulas com fundo suave, ativa em
   destaque — pedido do dono (2026-09-02). */
.entidade-abas { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: #F1F4F8; border-radius: 999px; }
.entidade-aba { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: #37474F; text-decoration: none; line-height: 1.2; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.entidade-aba:hover { background: #E3E8EF; color: #1E293B; text-decoration: none; }
.entidade-aba.ativa { background: linear-gradient(135deg, #594AE2, #7C6CF0); color: #fff; box-shadow: 0 4px 12px rgba(89,74,226,.35); }
@media (max-width: 700px) { .entidade-abas { border-radius: 16px; } }

/* Área de arrastar e soltar (Trabalhos > Importações) — achado real do suporte (14/09/2026): o
   <InputFile> real do MudFileUpload fica com o atributo HTML `hidden` (Hidden=true é o padrão) até
   a própria DragAndDrop mudar o estado — mas um elemento `hidden` não recebe evento nenhum do
   navegador (nem dragenter), então o primeiro arrasto nunca disparava e o campo nunca saía do
   estado escondido: arrastar um arquivo não fazia nada. Correção: Hidden="false" + este overlay
   transparente cobrindo a área visível — é o <input type=file> real (clique e soltar funcionam
   nativamente), só sem aparência; MudPaper por baixo é só a moldura visual. */
.pdv-area-arrastar-arquivo { position: relative; }
.pdv-input-arrastar-arquivo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }

/* WideDataTable do plano de adequação comercial (docs/PLANO-ADEQUACAO-DASHBOARDS-COMERCIAL.md,
   seção 2) — tabela larga sempre com rolagem horizontal visível (nunca depender de chegar no fim
   pra perceber que tem mais coluna) e a 1ª coluna (dimensão/contexto) fixa durante essa rolagem.
   Usar junto com MudTable FixedHeader="true" Height="..." (cabeçalho fixo já é nativo do MudBlazor)
   — esta classe só resolve rolagem horizontal + coluna de contexto fixa, que o MudTable não tem. */
.tabela-larga { overflow-x: auto; }
.tabela-larga table th:first-child, .tabela-larga table td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--mud-palette-surface);
  box-shadow: 2px 0 4px rgba(0,0,0,.06);
}
.tabela-larga table thead th:first-child { z-index: 3; }

/* ===== Padrão visual Trade7 (docs/PADRAO-VISUAL.md, 22/09/2026) — camada de design sobre o MudBlazor.
   Cor com significado fixo, relevo real nos cartões, número grande nos KPIs, tabela como detalhe. ===== */
:root {
  --t7-primaria: #2E7FEB; --t7-primaria-escura: #1F5FC4; --t7-primaria-clara: #E8F1FD;
  --t7-atencao: #F4AC57; --t7-atencao-clara: #FDF1E3;
  --t7-perigo: #CE0404; --t7-perigo-clara: #FEE4E4;
  --t7-sucesso: #64BB77; --t7-sucesso-escura: #2F7A41; --t7-sucesso-clara: #EBFAEE;
  --t7-aviso: #EDB012; --t7-aviso-escura: #8A6400; --t7-aviso-clara: #FDF4DE;
  --t7-navy: #1B3A5C; --t7-texto: #1E293B; --t7-texto-2: #64748B; --t7-borda: #E2E8F0;
  --t7-sombra-cartao: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08);
  --t7-gradiente-primario: linear-gradient(135deg, #32BDF9 0%, #3B82F6 100%);
}
body, .mud-typography { -webkit-font-smoothing: antialiased; }

/* Título de página: Exo 2 navy; subtítulo cinza. */
.mud-main-content .mud-typography-h4, .mud-main-content .mud-typography-h5 { color: var(--t7-navy); }

/* Cartões e papéis com relevo real (sem borda cinza). */
.mud-main-content .mud-paper:not(.mud-alert):not(.mud-table-toolbar):not(.mud-dialog):not(.mud-popover):not(.mud-drawer) {
  box-shadow: var(--t7-sombra-cartao); border-color: transparent;
}
.mud-main-content .mud-paper-outlined { box-shadow: none; border: 1px solid var(--t7-borda); }

/* Botão principal: gradiente + sombra colorida; texto sem caixa alta. */
.mud-button-filled.mud-button-filled-primary { background: var(--t7-gradiente-primario); box-shadow: 0 4px 12px rgba(46,127,235,.32); }
.mud-button-filled.mud-button-filled-primary:hover { background: var(--t7-primaria-escura); box-shadow: 0 2px 6px rgba(46,127,235,.32); }
.mud-button-root { border-radius: 12px; }

/* Barra superior navy com logo branco; menu lateral: item ativo com barra azul à esquerda. */
.mud-appbar .mud-typography, .mud-appbar .mud-button-root, .mud-appbar .mud-link { color: #fff; }
.mud-drawer .mud-nav-link { border-radius: 10px; margin: 2px 8px; color: var(--t7-texto); }
.mud-drawer .mud-nav-link:hover { background: #F1F5F9; }
.mud-drawer .mud-nav-link.active { background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); font-weight: 600; box-shadow: inset 4px 0 0 var(--t7-primaria); }
.mud-drawer .mud-nav-link.active .mud-icon-root { color: var(--t7-primaria); }

/* Tabelas: cabeçalho suave, linhas de 44 px, zebra leve, hover azul. */
.mud-table-container thead .mud-table-cell { background: #F1F5F9; color: var(--t7-texto-2); font-weight: 600; font-size: 13px; letter-spacing: .01em; }
.mud-table-container .mud-table-cell { padding-top: 10px; padding-bottom: 10px; }
.mud-table-container tbody tr:nth-of-type(even) { background: #F8FAFC; }
.mud-table-container tbody tr:hover { background: #EEF4FD !important; }

/* Chips de situação: cor de significado fixa (mesmas do app). */
.mud-chip.mud-chip-color-success { background: var(--t7-sucesso-clara); color: var(--t7-sucesso-escura); }
.mud-chip.mud-chip-color-warning { background: var(--t7-aviso-clara); color: var(--t7-aviso-escura); }
.mud-chip.mud-chip-color-error { background: var(--t7-perigo-clara); color: var(--t7-perigo); }
.mud-chip.mud-chip-color-secondary { background: var(--t7-atencao-clara); color: #9A5A0C; }
.mud-chip.mud-chip-color-primary, .mud-chip.mud-chip-color-info { background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); }
.mud-chip { font-weight: 600; }

/* Cartão de KPI: número grande Exo 2 na cor do significado, rótulo abaixo, mesmo tamanho na linha. */
.t7-kpi { display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding: 16px 20px; border-radius: 16px;
  background: #fff; box-shadow: var(--t7-sombra-cartao); position: relative; overflow: hidden; }
.t7-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--t7-cor, var(--t7-primaria)); }
.t7-kpi-valor { font-family: 'Exo 2', 'Open Sans', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--t7-cor, var(--t7-primaria)); }
.t7-kpi-rotulo { font-size: 13px; color: var(--t7-texto-2); margin-top: 4px; font-weight: 600; }
.t7-kpi-apoio { font-size: 13px; color: var(--t7-texto-2); margin-top: 2px; }
.t7-kpi.sucesso { --t7-cor: var(--t7-sucesso-escura); } .t7-kpi.atencao { --t7-cor: #C97A1A; }
.t7-kpi.perigo { --t7-cor: var(--t7-perigo); } .t7-kpi.aviso { --t7-cor: var(--t7-aviso-escura); } .t7-kpi.neutro { --t7-cor: var(--t7-navy); }

/* Abas do bloco Entidade seguem a primária (antes roxo, fora da paleta). */
.entidade-aba.ativa { background: var(--t7-gradiente-primario); box-shadow: 0 4px 12px rgba(46,127,235,.35); }

/* Diálogos e alertas: cantos e respiro. */
.mud-dialog { border-radius: 16px; }
.mud-alert { border-radius: 12px; }

/* Fileira de KPIs com N cartões iguais (5 sinais da Ruptura etc.): grade fluida, todos da mesma largura e altura. */
.t7-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.t7-kpis > * { display: flex; }
.t7-kpis .mud-link { width: 100%; display: flex; }
.t7-kpis .t7-kpi { width: 100%; }