/* =====================================================================
   ALTURA DOS CAMPOS — a métrica única de todos os campos do sistema

   Todo componente de campo do Caviúna (CavCampoTexto, CavBusca, CavCampoData,
   CavCampoHora, CavSelecao) marca seu contêiner com a classe "cav-campo-denso".
   Este arquivo é o único lugar que define a altura deles.

   Por que aqui e não no .razor.css de cada componente: a regra é idêntica nos cinco.
   Repetida em cinco arquivos, na primeira vez que alguém ajustasse um valor os campos
   passariam a ter alturas diferentes — que é exatamente o problema que este arquivo
   existe para não deixar acontecer.

   Por que não é CSS isolado: as regras precisam alcançar o markup que o MudBlazor
   renderiza dentro dos nossos <div>. O ::deep atravessa uma fronteira de componente,
   mas só funciona em arquivo .razor.css — e aí voltaríamos aos cinco arquivos.

   CARREGAR DEPOIS do MudBlazor.min.css (ver index.html).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. MARGEM EXTERNA IGUAL PARA CAMPO COM E SEM RÓTULO

   O MudBlazor dá margens diferentes para os dois casos:

       .mud-input-control-margin-dense                                { margin: 4px 0 }
       .mud-input-control-margin-dense.mud-input-outlined-with-label  { margin-top: 8px;
                                                                       margin-bottom: 4px }

   Com margem assimétrica, o input fica fora do centro da própria caixa. Quando dois
   campos ficam lado a lado e um tem rótulo e o outro não — o caso do CavBusca —, o
   align-items:center alinha as caixas e o conteúdo delas sai desalinhado.

   Os 4px de cima ficam: o rótulo flutuante sobe ~6px sobre a borda quando encolhe, e
   sem folga nenhuma ele invadiria o campo de cima.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input-control.mud-input-control-margin-dense,
.cav-campo-denso .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 2px;
    margin-bottom: 2px;
}


/* ---------------------------------------------------------------------
   1.b. A FONTE

   Este é o maior responsável pela sensação de "tela grande". O MudBlazor usa 1rem
   (16px) no campo, contra os ~11px da tela do desktop — e a fonte não muda só o
   texto: a altura do <input> é "1lh", ou seja, UMA ALTURA DE LINHA. Fonte maior,
   campo mais alto, mesmo com padding zero.

   13px é o meio-termo: aproxima do desktop e continua legível numa tela grande.

   Isto é seguro porque a borda do campo no MudBlazor é um <div> com borda simples —
   não existe <legend> com entalhe calculado a partir do texto do rótulo. O rótulo
   encolhido apenas cobre a linha da borda com o próprio fundo, então mudar o corpo
   da fonte não desalinha nada.
   --------------------------------------------------------------------- */
/* O line-height é declarado junto de propósito. A altura do <input> é "1lh", e o
   MudBlazor não define line-height nenhum — herdava o "normal" do navegador, que varia
   com a família da fonte (~1.15 aqui). Ou seja: a altura do campo dependia da fonte
   instalada, e qualquer conta feita em cima dela saía errada. Fixando em 1.4, a altura
   do campo passa a ser previsível: 18px de linha + 4px de folga de cada lado = ~26px. */
.cav-campo-denso .mud-input {
    font-size: .8125rem;
    line-height: 1.4;
}

/* O rótulo precisa deste seletor comprido, e não de um ".cav-campo-denso
   .mud-input-label-inputcontrol" curto. O MudBlazor fixa o corpo dele com

       .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol
       { font-size: 1rem }

   que são três classes. Um seletor de duas classes perde a disputa e o rótulo fica em
   16px dentro de um campo de 13px — grande, desproporcional, e ainda mais fácil de ser
   cortado por falta de largura. Espelhando o caminho e somando o .cav-campo-denso, são
   quatro classes contra três, e a nossa vale. */
.cav-campo-denso .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: .8125rem;
}

/* A caixa de linha do rótulo.

   O MudBlazor reserva 18px, desenhado para um campo de 45px — demais para os nossos 26px.
   Mas 14px, que era o valor aqui, é DE MENOS: o rótulo tem overflow:hidden, e numa caixa
   de 14px para uma fonte de 13px a descida das letras é cortada. "Projeto" perdia o pé do
   j, "Classificação" o da ç.

   16px é o meio-termo: cabe a descida e ainda sobra folga nos 26px do campo.

   Cinco classes: a regra dos 18px tem quatro (a de outlined), então as anteriores, mais
   curtas, não a alcançavam. */
.cav-campo-denso .mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    line-height: 16px;
}

/* O ícone acompanha: 24px de lupa dentro de um campo de 28px fica desproporcional. */
.cav-campo-denso .mud-input-adornment .mud-icon-root {
    font-size: 1.1rem;
}


/* ---------------------------------------------------------------------
   1.c. O ÍCONE DO CAMPO NÃO TEM CÍRCULO

   Vale para todos: a lupa do CavBusca, o X do CavCampoTexto, a flecha do CavSelecao.

   O MudBlazor desenha o ícone dentro de um botão redondo — e o redondo é maior que o
   campo. São três coisas somadas:

       .mud-icon-button       { padding: 4px a 6px }   caixa maior que o ícone
       .mud-ripple:hover      { background-color: ... }  o disco cinza ao passar o mouse
       .mud-ripple-icon:after { transform: scale(10, 10) }  o círculo que estufa no clique

   Isso é dimensionado para o campo de 45px do MudBlazor. Nos nossos 28px o disco não
   cabe: ele passa da borda de cima e da de baixo, e o que se vê é um círculo cortado
   atravessando a linha do campo — como se o ícone estivesse solto por cima dele.

   Encolher o disco em vez de removê-lo foi a primeira tentativa e não presta: para caber
   nos 28px ele fica menor que o próprio ícone, e aí é um anel apertado em volta da lupa,
   que parece defeito de renderização em vez de área clicável.

   Então o disco sai e a resposta ao mouse passa a ser a COR do ícone. Não se perde
   informação nenhuma: o cursor já vira mãozinha (a regra do próprio MudBlazor no
   .mud-input-adornment), e o ícone escurecendo diz "isto responde" sem precisar de
   geometria que não cabe.

   O foco por teclado é o único que ganha moldura — um retângulo com offset negativo, que
   desenha para DENTRO e por isso cabe. Tirar a marca de foco junto com o disco deixaria
   quem navega de Tab sem saber onde está.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input-adornment .mud-icon-button,
.cav-campo-denso .mud-input-adornment .mud-icon-button:hover,
.cav-campo-denso .mud-input-adornment .mud-icon-button:focus,
.cav-campo-denso .mud-input-adornment .mud-icon-button:active {
    padding: 2px;
    background-color: transparent;
}

/* O círculo que estufa no clique. */
.cav-campo-denso .mud-input-adornment .mud-ripple-icon::after {
    display: none;
}

.cav-campo-denso .mud-input-adornment .mud-icon-button:hover .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

.cav-campo-denso .mud-input-adornment .mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
    border-radius: 3px;
}


/* ---------------------------------------------------------------------
   2. A ALTURA

   O "dense" do MudBlazor reserva 10.5px acima e abaixo do texto. Somado à altura de
   linha da fonte, dava um campo de ~45px, contra os ~20px da tela do desktop.

   Com 4px de padding e a fonte de 13px acima, o campo fica em ~28px. O padding sozinho
   não resolveria: metade da altura vem da fonte, não da folga.

   São três seletores porque o MudBlazor renderiza três elementos diferentes conforme
   o campo: <input> no texto e nos pickers, <div class="mud-input-slot"> no select, e
   <textarea> no texto de várias linhas — este último posiciona por margin, não padding.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.cav-campo-denso div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 4px;
    padding-bottom: 4px;
}

.cav-campo-denso .mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense {
    margin-top: 4px;
    margin-bottom: 4px;
}


/* ---------------------------------------------------------------------
   3. O RÓTULO EM REPOUSO

   Campo vazio e sem foco: o rótulo fica dentro do campo, posicionado por transform
   com um valor calculado para os 45px originais. Sem reposicionar, ele fica baixo
   dentro do campo novo. 5px é o que centra os 16px de rótulo definidos acima nos ~26px
   de campo.

   O estado encolhido não entra aqui: a regra do MudBlazor para ele é mais específica
   (tem um seletor de elemento a mais), e continua colando o rótulo na borda de cima —
   que é o certo, e é o mesmo em qualquer altura de campo.
   --------------------------------------------------------------------- */
.cav-campo-denso .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 5px) scale(1);
}