/*
  NormaOne — Densidade Compacta (Etapa UI 2.1, refinada na "Padronização Global",
  recalibrada no "Refinamento do Design System — Densidade, Sidebar e Responsividade")

  Sobrescreve as classes do próprio MudBlazor globalmente, sem tocar em nenhuma tela/componente
  de módulo — por isso este arquivo é carregado DEPOIS de MudBlazor.min.css em App.razor (a ordem
  de carregamento decide o empate de especificidade CSS). Nunca abaixo de 11px (piso de
  legibilidade — badges/status).

  Valores desta rodada mirados para 1366×768 como resolução mínima de referência: tabelas com
  linhas de ~48–56px (a rodada anterior tinha ido abaixo disso, para ~34px — compacto demais para
  o objetivo real, que é boa densidade de LEITURA, não o menor pixel possível).
*/

/* Botões */
.mud-button-root {
    min-height: 34px;
    font-size: 13px; /* alinhado a Typography.Button do tema */
    padding: 6px 14px;
}

.mud-icon-button {
    padding: 6px;
}

    .mud-icon-button .mud-icon-root,
    .mud-button-root .mud-icon-root {
        font-size: 18px;
    }

/* Chips / badges — papel "badges/status" da escala: 10–11px */
.mud-chip {
    height: 22px;
    font-size: 11px;
    padding: 0 10px;
}

/* Tabelas — linhas de ~48–56px (padding vertical maior que a rodada anterior, de propósito) */
.mud-table-container .mud-table-cell {
    padding: 14px 12px;
    font-size: 13px; /* tabelas: 12–13px */
}

.mud-table-container .mud-table-head {
    background-color: var(--mud-palette-background-gray, #F8FAFC);
}

.mud-table-container .mud-table-head .mud-table-cell {
    font-size: 12px; /* cabeçalho: 12–13px */
    padding: 12px 12px;
}

.mud-table-container .mud-table-cell .mud-icon-button .mud-icon-root {
    font-size: 17px;
}

/* Campos de formulário */
.mud-input-control .mud-input-label {
    font-size: 13px;
}

.mud-input-control .mud-input-helper-text {
    font-size: 12px;
}

.mud-input-root {
    min-height: 38px;
    font-size: 13px; /* alinhado ao "texto normal" da escala */
}

/* Dialogs */
.mud-dialog-title {
    padding: 12px 20px;
}

.mud-dialog-content {
    padding: 12px 20px;
}

.mud-dialog-actions {
    padding: 8px 20px 16px;
}

/* Cabeçalhos de tela — telas que ainda usam Class="mb-4" após o título continuam com essa margem
   (não forçada aqui, para não arriscar quebrar espaçamentos intencionais em telas não revisadas
   visualmente nesta etapa); PageHeader.razor (uso futuro) já nasce com a margem compacta. */

/* Título de página sempre em caixa alta (Etapa UI 2.2) — Typo.h4 é usado só para título de página
   em todo o app hoje, então isto cobre toda tela sem precisar reescrever nenhuma string. */
.mud-typography-h4 {
    text-transform: uppercase;
}

/* Formulário compacto — opt-in, por wrapper (<div class="form-compacto">). A causa da altura dos
   campos é global: a regra acima fixa min-height:38px no próprio <input> (.mud-input-root), e o
   outlined denso do MudBlazor já traz 10px de padding em cima e embaixo — somados, ~60px por campo.
   Dentro de .form-compacto o campo fecha em 34px, com o rótulo flutuante reposicionado para a altura
   nova. Nasceu no diálogo de atividade do RDO (rdo-atividade-compacto) e em 27/09/2026 virou classe
   genérica para atender também o cadastro de obra. Só para campos outlined densos
   (Variant.Outlined + Margin.Dense): é com esse padding que as contas fecham. */
.form-compacto .mud-input-control {
    margin: 0;
}

/* O elemento que digita (input de texto, número e data) e o div que faz esse papel no select. Os
   seletores repetem a forma dos do MudBlazor (".mud-input>input.mud-input-root-outlined
   .mud-input-root-margin-dense", padding 10,5px em cima e embaixo) com uma classe a mais: com menos
   especificidade que isso, o padding do MudBlazor vence e o campo de texto fica com ~48px enquanto o
   select obedece aos 34px — foi exatamente o desalinhamento visto no cadastro de obra em 27/09/2026.
   Só o padding vertical muda; o lateral (14px, ou 0 do lado do adorno) continua o do MudBlazor. */
.form-compacto .mud-input-control .mud-input > input.mud-input-root,
.form-compacto .mud-input-control .mud-input > div.mud-input-slot.mud-input-root {
    height: 34px;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 34px;
    font-size: 13px;
}

/* Área de texto cresce com o conteúdo: só a altura mínima muda. */
.form-compacto .mud-input-control .mud-input > textarea.mud-input-root {
    box-sizing: border-box;
    height: auto;
    min-height: 34px;
    margin: 0;
    padding: 7px 14px;
    line-height: 1.4;
    font-size: 13px;
}

.form-compacto .mud-input-control .mud-input {
    min-height: 34px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* O rótulo flutuante do outlined denso é posicionado para o campo de 40px do MudBlazor (translate de
   12px); com 34px ele ficaria abaixo do centro. Só a posição "solta" muda: quando encolhe para a borda
   (.mud-shrink no irmão .mud-input, foco ou autofill), a regra do próprio MudBlazor tem especificidade
   maior que esta e continua valendo — o -6px da borda não depende da altura do campo. */
.form-compacto .mud-input-control .mud-input-label-outlined {
    transform: translate(14px, 8px) scale(1);
}

.form-compacto .mud-input-adornment .mud-icon-root,
.form-compacto .mud-input-adornment .mud-icon-button,
.form-compacto .mud-select .mud-input-adornment .mud-icon-button {
    height: 22px;
    width: 22px;
    padding: 0;
    font-size: 18px;
}

/* Os dois botões do campo numérico ficam empilhados dentro da altura do campo; com 34px, cada um fica
   com 17px e ícone de 16px. O seletor repete o do MudBlazor (com a tag button) para vencê-lo. */
.form-compacto .mud-input-control.mud-input-number-control .mud-input-numeric-spin button {
    height: 17px;
    min-height: 17px;
    padding: 0;
}

.form-compacto .mud-input-control.mud-input-number-control .mud-input-numeric-spin .mud-icon-root {
    font-size: 16px;
}

.form-compacto .mud-input-helper-text {
    margin-top: 2px;
}

/* Legenda de seção do formulário compacto: no lugar do subtitle2 com 16px de margem em cima e 8px
   embaixo, uma linha pequena em caixa alta que separa os blocos sem gastar altura. */
.form-compacto .form-secao {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 12px 0 6px;
}