/* "Linha de Fundo" na área administrativa — a mesma língua da área pública, agora sobre MudBlazor.
 *
 * Por que uma folha global e não CSS isolado: as decisões daqui são a MESMA linguagem de
 * wwwroot/css/public.css (linha, não sombra; a faixa da rede; a bandeira do juiz de linha), só que
 * traduzida para os seletores `.mud-*` que dezenas de telas administrativas herdam sem tocar.
 * Repetir isto em cada `.razor.css` seria reescrever a direção em cada arquivo.
 *
 * Carregada em index.html DEPOIS de MudBlazor.min.css: empatada a especificidade, a folha de baixo
 * vence. `!important` só onde o MudBlazor pinta a sombra por classe de elevação — a assinatura da
 * direção é "sem sombra", e é a única regra que não pode perder.
 *
 * Nenhum hexadecimal: cor sai de `--color-*` (tokens de "Linha de Fundo", em :root via tailwind.css)
 * e de `--mud-palette-*` (o MudTheme deriva estes dos mesmos tokens em CircuitoTheme.cs).
 * DesignTokenTests.NoRazorOrCssFileContainsRawHexColor varre este arquivo.
 *
 * O produto tem UM tema, claro, nas duas áreas (o problema da quadra é sol na tela, não tela clara)
 * — nenhum bloco `prefers-color-scheme` em folha nenhuma.
 *
 * Estado visual (selecionado, listra, linha em destaque) sai de `background-color` e de borda;
 * `box-shadow`/`outline` ficam reservados ao anel de foco. Misturar os dois é como o anel do botão
 * primário sumiu aqui: a regra 1 apaga sombra com `!important` e o foco perdia sem aviso.
 */

/* ---------- 1. sem sombra em lugar nenhum ---------- */

/* O MudBlazor emite a sombra por classe de elevação (`.mud-elevation-N`) e por componente. A
   direção inteira depende de nenhuma delas aparecer. */
.mud-elevation-0, .mud-elevation-1, .mud-elevation-2, .mud-elevation-3, .mud-elevation-4,
.mud-elevation-5, .mud-elevation-6, .mud-elevation-7, .mud-elevation-8, .mud-elevation-9,
.mud-elevation-10, .mud-elevation-11, .mud-elevation-12, .mud-elevation-13, .mud-elevation-14,
.mud-elevation-15, .mud-elevation-16, .mud-elevation-17, .mud-elevation-18, .mud-elevation-19,
.mud-elevation-20, .mud-elevation-21, .mud-elevation-22, .mud-elevation-23, .mud-elevation-24,
.mud-elevation-25,
.mud-paper, .mud-appbar, .mud-drawer, .mud-card, .mud-dialog, .mud-popover, .mud-menu,
.mud-table, .mud-expansion-panels, .mud-alert, .mud-button-filled, .mud-chip, .mud-tabs-toolbar {
    box-shadow: none !important;
}

/* ---------- 2. a moldura: barra do app = faixa da rede ---------- */

/* O teal já vem de `AppbarBackground = Primary` (CircuitoTheme). Aqui: a aresta pintada embaixo, no
   lugar da sombra, e o texto na fonte display. */
.mud-appbar {
    border-bottom: 2px solid var(--color-line-strong);
}

.mud-appbar .mud-typography-h6 {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght" 800, "wdth" 110;
    letter-spacing: 0.01em;
}

/* A palavra-marca leva a barra de âmbar embaixo — assinatura, igual ao `.wordmark` do PublicLayout. */
.mud-appbar .mud-typography-h6 {
    box-shadow: inset 0 -3px 0 var(--color-secondary);
    padding-bottom: 2px;
}

/* ---------- 3. gaveta ---------- */

.mud-drawer {
    border-right: 2px solid var(--color-line-strong);
}

/* Item de menu: o corrente planta a bandeira do juiz de linha — aresta âmbar de 3px à esquerda e
   uma lavagem leve de teal, no lugar do preenchimento cinza-sólido padrão do MudBlazor. O seletor
   precisa da folga de especificidade (`.mud-drawer` + os dois nomes de classe que a versão usa) e
   o `!important` no fundo porque a regra do pacote pinta o cinza com peso maior. */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.mud-nav-link-active {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--color-secondary);
    border-radius: 0;
    color: var(--color-ink);
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: var(--color-primary);
}

.mud-nav-group .mud-nav-link,
.mud-nav-link {
    border-radius: 0;
}

/* ---------- 4. papel = painel de quadra ---------- */

/* Fio de giz de 1px em volta, aresta pintada de 2px no topo. Sem sombra, canto de 4px. A mesma
   forma de `.pub-list`/`.pub-sheet`. */
.mud-paper,
.mud-paper-outlined {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

.mud-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

/* Painel dentro de painel (cláusula de regulamento, tabela numa ficha): só o fio de giz, sem a
   segunda aresta pintada — uma quadra tem um limite, não um por caixa aninhada. */
.mud-paper .mud-paper,
.mud-paper .mud-card,
.mud-paper .mud-table {
    border-top-width: 1px;
    border-top-color: var(--color-line);
}

/* ---------- 5. botões ---------- */

/* Preenchido: cor de ação, borda de linha forte, sem sombra; afunda 1px quando apertado — o botão
   de placar da quadra. Mesma pressão de `.pub-submit`. */
.mud-button-root.mud-button-filled {
    border: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    transition: transform 90ms ease-out, background-color 140ms ease-out;
}

.mud-button-root.mud-button-filled:active {
    transform: translateY(1px);
}

.mud-button-root.mud-button-filled-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* Contorno: superfície, borda de linha forte de 2px. */
.mud-button-root.mud-button-outlined {
    border: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

.mud-button-root.mud-button-outlined-primary {
    color: var(--color-primary);
}

/* Texto: sem moldura, é a saída de menor peso. */
.mud-button-root.mud-button-text {
    border-radius: var(--radius-md);
}

/* Anel de foco na cor de ação nos três, igual ao resto do produto.

   Por `outline`, e não por `box-shadow`: a regra 1 apaga a sombra de `.mud-button-filled` com
   `!important`, e `!important` vence qualquer especificidade — um anel por sombra simplesmente não
   aparecia no botão primário, que é o de gravar placar de todas as telas. `outline` é a única
   propriedade que a regra 1 não toca. O deslocamento negativo desenha o anel POR DENTRO da borda,
   para o botão não crescer ao receber foco nem vazar do rodapé de um diálogo. */
.mud-button-root:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

/* ---------- 6. tabela = súmula ---------- */

.mud-table {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

.mud-table-container { border-radius: 0; }

/* Cabeçalho de coluna: aresta pintada embaixo, caixa alta miúda. */
.mud-table-head .mud-table-cell {
    border-bottom: 2px solid var(--color-line-strong);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

.mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--color-line);
    font-variant-numeric: tabular-nums;
}

/* Zebra na areia — para o olho não perder a linha ao rolar. Mistura de giz para ficar quente e um
   degrau visível acima de Surface, sem puxar para o verde do teal. */
.mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell {
    background-color: color-mix(in srgb, var(--color-line) 38%, var(--color-surface));
}

.mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: color-mix(in srgb, var(--color-line) 60%, var(--color-surface));
}

.mud-table-pager { border-top: 2px solid var(--color-line-strong); }

/* Número que decide ordem (posição, placar): fonte display, largura fixa. Marcação usa
   `mud-table-cell-numeric` ou a própria coluna; o mínimo garantido é o algarismo tabular acima. */
.mud-table .mud-table-cell.mud-table-cell-numeric {
    font-family: var(--font-display);
    font-weight: 700;
}

/* ---------- 7. campos ---------- */

/* Contorno de 2px na linha forte; foco troca por anel de teal, igual a `.pub-*` e a PublicField. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--color-line-strong);
    border-radius: var(--radius-md);
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* Variante de sublinhado (busca e filtros das listas): fio de linha forte em repouso, teal ao
   focar — o mesmo par de `.pub-*`. */
.mud-input.mud-input-underline::before { border-bottom-color: var(--color-line-strong); }
.mud-input.mud-input-underline::after { border-bottom-color: var(--color-primary); }

.mud-input-label { color: var(--color-ink-muted); }

/* ---------- 8. alerta ---------- */

/* Painel recortado pela cor de estado na borda inteira; a mensagem em tinta normal — quem lê
   precisa entender o texto, não decifrá-lo em vermelho. Mesma regra de `.pub-error`. */
.mud-alert {
    background-color: var(--color-surface);
    border: 2px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    color: var(--color-ink);
}

.mud-alert.mud-alert-filled-error, .mud-alert.mud-alert-outlined-error, .mud-alert.mud-alert-text-error { border-color: var(--color-error); }
.mud-alert.mud-alert-filled-success, .mud-alert.mud-alert-outlined-success, .mud-alert.mud-alert-text-success { border-color: var(--color-success); }
.mud-alert.mud-alert-filled-warning, .mud-alert.mud-alert-outlined-warning, .mud-alert.mud-alert-text-warning { border-color: var(--color-warning); }
.mud-alert.mud-alert-filled-info, .mud-alert.mud-alert-outlined-info, .mud-alert.mud-alert-text-info { border-color: var(--color-info); }

.mud-alert .mud-alert-icon { color: var(--color-ink-muted); }

/* ---------- 9. selo / chip = pílula de estado ---------- */

/* Contorno duro, canto redondo total, caixa alta miúda — a mesma forma de `.pub-tag`. A COR vem da
   classe `.mud-chip-color-*` que a marcação já escolhe (DomainStatusPill / Color=...). */
.mud-chip {
    border: 1.5px solid var(--color-line-strong);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: auto;
    min-height: 1.5rem;
    padding-block: 0.15rem;
}

/* ---------- 10. diálogo / menu / popover ---------- */

.mud-dialog {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 3px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

.mud-dialog-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.005em;
}

.mud-popover, .mud-menu-popover, .mud-list {
    background-color: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
}

/* ---------- 11. tipografia display ---------- */

/* A família já vem do MudTheme (`--mud-typography-hN-family` = Anybody). Aqui o eixo de peso e
   largura — larga e pesada, letra de camisa de time — e a entreletra fechada. */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-weight: 800;
    font-variation-settings: "wght" 800, "wdth" 108;
    letter-spacing: -0.01em;
}

.mud-typography-h5, .mud-typography-h6 {
    font-variation-settings: "wght" 750, "wdth" 104;
    letter-spacing: -0.005em;
}

.mud-typography-subtitle1, .mud-typography-subtitle2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-variation-settings: "wght" 700, "wdth" 100;
}

/* ---------- 12. superfícies do navegador ---------- */

.mud-layout ::selection {
    background-color: var(--color-secondary);
    color: var(--color-ink);
}

/* ---------- 13. progressão ---------- */

.mud-progress-circular.mud-primary-text .mud-progress-circular-circle {
    stroke: var(--color-primary);
}