/*  ============================================================================
    eAtivoRH — camada de identidade visual (rótulo-no-topo)
    ============================================================================
    CÓPIA FIEL do subconjunto do design system do eAtivoProject
    (eAtivoProject/wwwroot/css/eativo-ui.css) necessário para o padrão de CAMPO
    rótulo-no-topo. O eAtivoRH é projeto SEPARADO (não referencia o eAtivoProject
    de propósito), então isto é cópia, não herança — manter EM SINCRONIA com a
    fonte de lá. Carregado DEPOIS do MudBlazor (ver App.razor): é a camada de
    OVERRIDE que veste os componentes; carregada antes, perderia a disputa de
    especificidade e o campo voltaria à densidade Material (16px).
    ============================================================================ */

:root {
    --ea-fonte: Roboto, "Segoe UI", Arial, sans-serif;
    --ea-fonte-base: 12px;   /* Roboto é estreita; 12px lê como os 11px de Verdana do Legado */
    --ea-raio: 4px;
    --ea-espaco: 8px;

    --ea-laranja: #d9701f;   /* laranja da marca — em sincronia com o MudTheme */
    --ea-borda: #ddd;
    --ea-borda-forte: #ccc;
    --ea-texto: #333;
    --ea-texto-medio: #555;
    --ea-texto-fraco: #666;
    --ea-texto-apagado: #888;
    --ea-fundo: #fff;
    --ea-fundo-alt: #f9f9f9;
    --ea-fundo-cabecalho: #f0f0f0;

    /*  BOTÕES — nomeados por FUNÇÃO, não por cor (cópia fiel do eAtivoProject). Principal
        = cinza #666 com letra branca; secundária = #ddd com letra #333; hover ESCURECE um
        degrau; inativo é um par neutro (não opacity); foco acende anel laranja. */
    --ea-acao-principal: var(--ea-texto-fraco);
    --ea-acao-principal-hover: var(--ea-texto-medio);
    --ea-acao-principal-texto: var(--ea-fundo);
    --ea-acao-secundaria: var(--ea-borda);
    --ea-acao-secundaria-hover: var(--ea-borda-forte);
    --ea-acao-secundaria-texto: var(--ea-texto);
    --ea-acao-inativa: var(--ea-fundo-cabecalho);
    --ea-acao-inativa-texto: var(--ea-texto-apagado);
    --ea-acao-pressao: .85;
    --ea-acao-transicao: 150ms cubic-bezier(.2, 0, .2, 1);
    --ea-acao-foco: var(--ea-laranja);
}

/*  PILHA VERTICAL das linhas do formulário. gap 16px = o mesmo respiro reduzido a
    pedido do PO no eAtivoProject (era 28px). Só o espaço ENTRE linhas; a largura vem
    da .ea-linha, e o rótulo cola no campo (4px em __rotulo). */
.ea-campos-topo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ea-campo-topo {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/*  LINHA — distribuição horizontal por PROPORÇÃO. Cada campo recebe --c:N inline
    (ex.: style="--c:40"); flex-basis:0 faz N virar a fração exata do espaço, então a
    soma sempre consome 100% da largura, qualquer que seja o tamanho do diálogo. */
.ea-linha {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.ea-col {
    flex-grow: var(--c);
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
}

/*  Fallback estreito: abaixo de 720px cada campo ocupa a linha inteira. */
@media (max-width: 720px) {
    .ea-linha { flex-wrap: wrap; }
    .ea-col { flex-basis: 100%; }
}

/*  RÓTULO no topo: pequeno, maiúsculo, cinza — idioma Material/Google Forms. */
.ea-campo-topo__rotulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ea-texto-medio);
    margin-bottom: 4px;
}

/*  OBRIGATÓRIO = asterisco laranja (o rótulo em si não muda de cor). */
.ea-campo-topo__obrigatorio {
    color: var(--ea-laranja);
    margin-left: 3px;
    font-weight: 700;
}

.ea-campo-topo__campo {
    min-width: 0;
}

    .ea-campo-topo__campo > * {
        width: 100%;
    }

/*  O MudBlazor dá margem Margin.Dense (4px) ao .mud-input-control; num invólucro
    bloco ela colapsa, num flex empurra 4px. Zerar aqui alinha todos os controles
    (input, select, datepicker) no topo da coluna. */
.ea-campo-topo__campo .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/*  Campo só-leitura (ex.: a empresa na edição). Caixa suave com o texto centralizado. */
.ea-campo-topo__campo .ea-form__leitura,
.ea-form__leitura {
    padding: 6px 8px;
    min-height: 35px;
    display: flex;
    align-items: center;
    background: var(--ea-fundo-alt);
    border: 1px solid var(--ea-borda);
    border-radius: var(--ea-raio);
    color: var(--ea-texto-medio);
    font-size: var(--ea-fonte-base);
}

/*  ============================================================================
    CAMPOS DENSOS — aplicar Class="ea-campo" no MudTextField/MudSelect/MudDatePicker.
    Encolhe o TEXTO à densidade do e-Ativo (12px, não os 16px do Material) e pinta a
    borda de foco de laranja. O RÓTULO flutuante do MudBlazor fica de fora de propósito
    (no padrão rótulo-no-topo o campo NÃO tem Label — o rótulo é o .ea-campo-topo__rotulo).
    ============================================================================ */
.ea-campo .mud-input,
.ea-campo .mud-input-control,
.ea-campo input,
.ea-campo .mud-select-input {
    font-family: var(--ea-fonte);
    font-size: var(--ea-fonte-base);
}

.ea-campo .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ea-borda-forte);
    border-radius: var(--ea-raio);
}

.ea-campo .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--ea-laranja) !important;
    border-width: 1px;
}

/*  CAMPO COMPACTO VERTICALMENTE — a densidade do e-Ativo (Legado era Verdana 11px).
    Como no padrão rótulo-no-topo o campo NÃO tem rótulo flutuante (o rótulo é o
    .ea-campo-topo__rotulo), o padding do topo do input outlined pode encolher sem
    desalinhar o recorte da borda. Deixa o campo em ~30px em vez dos ~40px do dense de
    fábrica — o que o PO pediu ("campos exageradamente largos verticalmente"). Pega o
    slot do input, do select e do datepicker (todos usam .mud-input-slot). */
.ea-campo .mud-input-slot {
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.35;
    min-height: unset;
}

/*  SEÇÃO — separador com rótulo pequeno e uma linha à direita. */
.ea-form__secao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    color: var(--ea-texto-medio);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

    .ea-form__secao::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid var(--ea-borda);
    }

/*  ============================================================================
    TÍTULO DE FORMULÁRIO — no tamanho dos títulos de diálogo do eAtivoProject
    ============================================================================ */
.ea-processo__titulo {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ea-laranja);
    color: var(--ea-texto);
    font-family: var(--ea-fonte);
    font-size: 13pt;
    font-weight: bold;
    text-transform: uppercase;
}

/*  Barra de botões finais do formulário — alinhada à ESQUERDA (padrão do eAtivoProject). */
.ea-form__acoes {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
}

/*  ============================================================================
    BOTÕES — família de aparência ÚNICA, papéis por classe (cópia do eAtivoProject).
    Principal (Gravar) = cinza #666, letra branca. Secundária (Cancelar/barra) = #ddd,
    letra #333. Sem borda, caixa de frase, ~26px, hover escurece, foco anel laranja.
    A ORDEM DOS BLOCOS DE PAPEL É LOAD-BEARING (secundária → principal → secundária).
    ============================================================================ */
.ea-btn,
.ea-processo__acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    min-width: 0;
    border: 0;
    border-radius: var(--ea-raio);
    background: var(--acao-fundo);
    color: var(--acao-texto);
    font-family: var(--ea-fonte);
    font-size: var(--ea-fonte-base);
    font-weight: normal;
    text-transform: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--ea-acao-transicao), color var(--ea-acao-transicao);
}

/*  MudButton (Variant.Text) traz text-transform/min-width próprios — a classe manda. */
.mud-button-root.ea-btn,
.mud-button-root.ea-processo__acao {
    text-transform: none;
    min-width: 0;
}

/*  PAPEL secundário. */
.ea-btn,
.ea-processo__acao--secundario {
    --acao-fundo: var(--ea-acao-secundaria);
    --acao-fundo-hover: var(--ea-acao-secundaria-hover);
    --acao-texto: var(--ea-acao-secundaria-texto);
}

/*  PAPEL principal — DEPOIS do secundário. */
.ea-processo__acao,
.ea-btn--primario {
    --acao-fundo: var(--ea-acao-principal);
    --acao-fundo-hover: var(--ea-acao-principal-hover);
    --acao-texto: var(--ea-acao-principal-texto);
}

/*  Secundário DE NOVO, DEPOIS do principal — o Cancelar (que tem as duas classes) vence. */
.ea-processo__acao--secundario {
    --acao-fundo: var(--ea-acao-secundaria);
    --acao-fundo-hover: var(--ea-acao-secundaria-hover);
    --acao-texto: var(--ea-acao-secundaria-texto);
}

.ea-btn:hover:not(:disabled),
.ea-processo__acao:hover:not(:disabled) {
    background: var(--acao-fundo-hover);
}

.ea-btn:active:not(:disabled),
.ea-processo__acao:active:not(:disabled) {
    filter: brightness(var(--ea-acao-pressao));
}

.ea-btn:disabled,
.ea-btn.mud-disabled,
.ea-processo__acao:disabled,
.ea-processo__acao.mud-disabled {
    background: var(--ea-acao-inativa);
    color: var(--ea-acao-inativa-texto) !important;
    cursor: not-allowed;
}

.ea-btn:focus-visible,
.ea-processo__acao:focus-visible {
    outline: 2px solid var(--ea-acao-foco);
    outline-offset: 2px;
}