/* =====================================================================
   O MENU LATERAL DO SISTEMA — a mesma caixa nos dois módulos.

   Campo e Gerencial têm menus DIFERENTES: itens diferentes, para telas diferentes, e é
   assim de propósito (ver docs/REGRAS-DE-ARQUITETURA.md). O que eles não podem ter de
   diferente é a APARÊNCIA — densidade, corpo de texto, tamanho de ícone, recuo. Quem
   trabalha nos dois no mesmo dia não deve sentir que trocou de sistema ao trocar de aba.

   POR QUE ESTE ARQUIVO EXISTE, e por que ele é global e não um .razor.css:

   As regras moravam em MenuGerencial.razor.css, isoladas naquele componente. O menu do
   Campo tinha a classe .cav-menu e um comentário dizendo que as regras estavam "num
   arquivo só para os dois módulos" — o arquivo nunca foi escrito. Resultado: o Gerencial
   saía compacto e o Campo ficava com o padrão do MudBlazor, que é bem mais folgado. Duas
   telas do mesmo sistema com dois menus diferentes.

   Copiar o .razor.css para o Campo resolveria a foto de hoje e criaria o problema de
   amanhã: dois arquivos com as mesmas trinta medidas, e o primeiro ajuste em um deles
   reabrindo a diferença. Num arquivo só, os dois menus não TÊM COMO divergir.

   É o mesmo acordo do campos-caviuna.css e do botoes-caviuna.css.

   OS DOIS MENUS USAM A CLASSE .cav-menu na div raiz. Sem ::deep aqui: folha global não
   tem fronteira de componente para atravessar.

   CARREGAR DEPOIS do MudBlazor.min.css (ver index.html): tudo aqui sobrescreve medida
   dele.
   ===================================================================== */

/* ------------------------------------------------------------------ o item

   O PADRÃO DO MUDBLAZOR FOI DESENHADO PARA TOQUE: 12px de recheio em cima e embaixo de
   cada item, mais o corpo de fonte cheio. Numa gaveta com três grupos, quatorze telas e um
   subgrupo, isso empurrava metade da lista para fora da altura da tela — e "Gerenciador de
   Clientes" ainda quebrava em duas linhas, ocupando o dobro do lugar de um item comum.

   Aqui a gaveta é de mouse e teclado, e os dois módulos são usados o dia inteiro por quem
   já sabe onde as coisas estão. Densidade vale mais que área de toque.

   NADA FOI TIRADO: os mesmos itens, os mesmos textos por extenso, os mesmos ícones. Só o
   espaço entre eles diminuiu.

   12px/16px viram 5px/14px. O corte é no VERTICAL: é ele que multiplica por quatorze e
   estoura a altura. O horizontal encolhe pouco, porque é o que separa o ícone da borda e
   dá ao item a aparência de coisa clicável. */
.cav-menu .mud-nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 14px;
    padding-right: 14px;
    /* 1.35, e não o 1.6 padrão: com duas linhas — que ainda acontece em nome longo numa
       gaveta estreita — a segunda cola melhor na primeira e o item continua se lendo como
       um bloco só. */
    line-height: 1.35;
    min-height: 0;
}

/* 13px, o mesmo corpo dos campos do sistema (ver campos-caviuna.css).

   É o que faz "Gerenciador de Clientes" caber numa linha só nos 240px da gaveta: com o
   0.875rem padrão ele quebrava, e um item de duas linhas no meio de itens de uma quebra a
   cadência da lista inteira. */
.cav-menu .mud-nav-link,
.cav-menu .mud-nav-link .mud-nav-link-text {
    font-size: .8125rem;
}

/* ------------------------------------------------------------------ o ícone

   20px é o tamanho do ícone de campo do sistema. O vão de 10px é o mínimo em que o ícone
   ainda se lê como pertencente ao texto, e não como enfeite solto na margem. */
.cav-menu .mud-nav-link .mud-nav-link-icon {
    font-size: 20px;
    margin-right: 10px;
    min-width: 0;
}

/* ------------------------------------------------------------- o primeiro nível

   O CABEÇALHO DE GRUPO E O LINK SOLTO DO PRIMEIRO NÍVEL SÃO A MESMA COISA VISUAL.

   Os dois seletores juntos, e não só o do grupo, é o que iguala os dois menus de verdade:
   no Gerencial o primeiro nível é só grupo (Início, Uso Interno, Gerenciador de Clientes);
   no Campo há grupo (Confinamento) E link solto (Dashboard, Mapa, e a volta ao Gerencial).
   Estilizando só o grupo, no Campo o Dashboard sairia maior que o Confinamento logo abaixo
   dele — dois pesos no mesmo nível, que é justamente a diferença que não pode existir.

   Um tico mais alto que um item de dentro, e em semibold: o primeiro nível precisa se
   distinguir das telas dentro dele, senão a lista vira uma coluna uniforme em que não se
   acha onde uma seção termina e a outra começa.

   O ganho de densidade vem do item de dentro, que se repete quatorze vezes; o primeiro
   nível aparece quatro, e apertá-lo custaria mais legibilidade do que devolveria em
   espaço. */
.cav-menu .mud-nav-group > .mud-nav-link,
.cav-menu .mud-navmenu > .mud-nav-link {
    padding-top: 7px;
    padding-bottom: 7px;
    /* 12px, menor que os 13px dos itens: o cabeçalho disputa a largura com DUAS coisas que
       o item não tem — o ícone à esquerda e a seta de expandir à direita —, e sobra menos
       espaço para o texto justamente na linha de texto mais longo do menu. O semibold
       devolve o destaque que o corpo menor tiraria. */
    padding-left: 12px;
    padding-right: 8px;
    font-size: .75rem;
    font-weight: 600;
}

/* UMA LINHA, SEMPRE.

   "Gerenciador de Clientes" quebrava em duas mesmo depois de a fonte diminuir, e item de
   duas linhas no meio de itens de uma quebra a cadência da lista inteira.

   O nowrap é a garantia; as reduções de largura acima e abaixo são o que faz o texto caber
   DENTRO dela, em vez de ser cortado. O ellipsis fica só como rede de segurança para um
   nome maior que os de hoje — e, se ele aparecer, o certo é encurtar o nome, não deixar o
   menu cortando. */
.cav-menu .mud-nav-group > .mud-nav-link .mud-nav-link-text,
.cav-menu .mud-navmenu > .mud-nav-link .mud-nav-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O ícone do primeiro nível cede um pouco: 18px e 8px de vão, contra os 20/10 dos itens de
   dentro. São 4px que vão inteiros para o texto. */
.cav-menu .mud-nav-group > .mud-nav-link .mud-nav-link-icon,
.cav-menu .mud-navmenu > .mud-nav-link .mud-nav-link-icon {
    font-size: 18px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* A SETA DE EXPANDIR, menor e mais colada na borda.

   No padrão ela é um ícone de 24px com margem própria — quase 40px tirados justamente da
   largura de que o cabeçalho precisa. Em 18px ela continua óbvia (é a única seta do menu) e
   devolve o espaço para o texto.

   O flex-shrink: 0 impede o contrário do que se quer aqui: sem ele, o navegador poderia
   espremer a seta em vez do texto e ela viraria um risco. */
.cav-menu .mud-nav-link-expand-icon {
    font-size: 18px;
    margin-left: 2px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ o recuo

   OS SELETORES PASSAM PELO .mud-collapse-container de propósito, e não por um descendente
   solto de .mud-nav-group.

   O cabeçalho do grupo TAMBÉM é descendente do .mud-nav-group. Escrito como
   ".mud-nav-group .mud-nav-link", o recuo pegava o cabeçalho junto — com a mesma
   especificidade da regra dele e declarado depois, vencia — e empurrava "Gerenciador de
   Clientes" 28px para dentro. Era metade do motivo de o título não caber numa linha.

   Dentro do container de colapso só existem as TELAS do grupo (e os subgrupos). O
   cabeçalho fica de fora dele, e por isso escapa destas regras.

   28px no primeiro nível e 44px no segundo mantêm a hierarquia legível — dá para ver de
   relance o que está dentro do quê — sem comer a largura do texto. */
.cav-menu .mud-nav-group > .mud-collapse-container .mud-nav-link {
    padding-left: 28px;
}

/* O segundo nível: as telas dentro de um subgrupo — Cadastros, no Gerencial; Relatórios,
   no Confinamento do Campo.

   Mais específico que a regra acima E declarado depois, então vence sem precisar de
   !important. O cabeçalho do subgrupo NÃO é alcançado — ele está no container do pai, não
   no próprio —, e fica nos 28px dos irmãos dele, que é onde deve estar: ele é um item do
   grupo pai, e recuar diferente o faria parecer de outro nível. */
.cav-menu .mud-nav-group > .mud-collapse-container .mud-nav-group > .mud-collapse-container .mud-nav-link {
    padding-left: 44px;
}

/* ------------------------------------------------------- o respiro entre grupos

   Um fio de espaço separando um bloco do seguinte. Sem ele, com os itens tão juntos, a
   última tela de um grupo e o cabeçalho do próximo ficariam colados e se leriam como se a
   tela pertencesse ao grupo de baixo.

   O segundo seletor é do Campo, onde um link solto pode vir depois de um grupo. Margem, e
   não borda: linha divisória em cima de uma lista curta pesa mais que separa. */
.cav-menu .mud-navmenu > .mud-nav-group + .mud-nav-group,
.cav-menu .mud-navmenu > .mud-nav-group + .mud-nav-link,
.cav-menu .mud-navmenu > .mud-nav-link + .mud-nav-group {
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════ NO CELULAR ═══

   O que some do menu no celular é marcado com "cav-so-desktop", e a regra dessa classe
   NÃO está aqui: ela vale para o sistema inteiro — itens de menu, botões que abrem grade,
   qualquer bloco — e mora em wwwroot/css/responsivo-caviuna.css.

   Ela já esteve neste arquivo, com o nome "cav-menu-so-desktop", quando só o menu
   precisava dela. Saiu quando os botões que abrem grade passaram a precisar da mesma
   coisa: dois nomes para o mesmo conceito é o começo de "some no celular" querer dizer
   coisas diferentes conforme onde está escrito.

   O menu do Gerencial marca Visão geral, Componentes e os grupos do catálogo. O do Campo
   não marca nada — Dashboard e Mapa são as duas telas que existem nele. */