/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
  ETAPA 4H.32 — os módulos horizontais (Painel/Colaboradores/NR-10/.../Documentos Finais) saíram da
  barra superior e viraram a navegação principal em NavMenu.razor/NavMenu.razor.css (dentro do
  MudDrawer). As regras `.nav-modules`/`.nav-module-*` que só existiam para eles foram removidas
  daqui — o restante deste arquivo (altura do AppBar, área do usuário, botão hambúrguer) não mudou.
*/

/* ETAPA 4H.33 — o fundo azul-marinho da sidebar (classe "app-sidebar" no MudDrawer acima) e as
   custom properties --sidebar-* vivem em `wwwroot/css/sidebar.css` (arquivo GLOBAL, sem escopo do
   Blazor), não aqui. Causa raiz confirmada inspecionando o HTML real servido: <MudDrawer> é
   renderizado por MudLayout (componente de terceiros) como IRMÃO de <MudAppBar> — nenhum elemento
   literal de MainLayout.razor fica entre os dois na árvore, então o <aside class="... app-sidebar">
   nunca carrega o atributo de escopo b-xxxxxxx que `::deep .app-sidebar` precisaria encontrar num
   ancestral; a regra nunca casava e a sidebar renderizava com o fundo branco padrão do MudBlazor.
   Mesma causa raiz documentada mais abaixo para `user-menu.css`, só que ali é um portal e aqui é
   uma relação de irmãos — a solução é a mesma: CSS global casa por classe, não por escopo. */

/* Eixo vertical único da barra — nunca permitir que um item fique mais alto/baixo que os outros. */
[b-yw7zk1bvfc] .mud-appbar .mud-toolbar-gutters {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* Refinamento horizontal: em telas largas, identidade+navegação (ancoradas à esquerda) e
       usuário (ancorado à direita) ficavam separados por um vão vazio grande, porque o MudSpacer
       entre os dois grupos crescia até preencher toda a largura da viewport. Limitar a largura útil
       do conteúdo da barra (a cor de fundo continua ocupando 100% da tela) e centralizá-lo faz o vão
       sobrar dos dois lados, em vez de se concentrar todo no meio — sem mexer em altura,
       centralização vertical ou em nenhum módulo individualmente. 1600px (tentativa anterior) ainda
       deixava folga demais para o MudSpacer crescer, visível no print em tela larga — apertado para
       1440px (largura estimada do conteúdo real — identidade + 9 módulos + usuário + sair — fica
       bem abaixo disso, então ainda sobra respiro, só que bem menos do que antes). */
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* Ícone do menu hamburger — mesmo peso visual dos ícones de módulo. */
[b-yw7zk1bvfc] .menu-toggle-btn .mud-icon-root {
    font-size: 30px;
}

/* Área do usuário — bloco único (ícone+nome+seta) com a altura cheia da barra, mesmo eixo vertical
   dos módulos e do botão Sair (Ajuste crítico — alinhamento da barra superior). Agora é a raiz do
   MudMenu (antes era a div simples) — display/align explícitos garantem que o mesmo alinhamento
   vertical já corrigido continue valendo mesmo com o wrapper extra do menu. */
[b-yw7zk1bvfc] .user-area {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Refinamento do bloco do usuário — depois de várias tentativas de layout com nome+e-mail visíveis
   ao lado do avatar não se confirmarem no navegador do usuário (apesar de código-fonte, build e CSS
   compilado/servido todos verificados corretos), a decisão final foi simplificar: só o avatar com as
   iniciais, centralizado verticalmente na barra (herdado de .user-area) — nome/e-mail completos
   continuam visíveis no cabeçalho do menu que abre ao clicar. */
[b-yw7zk1bvfc] .user-avatar-header.mud-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    cursor: pointer;
}

[b-yw7zk1bvfc] .logout-btn {
    font-weight: 600;
    font-size: 14px;
    height: 100%;
}

    [b-yw7zk1bvfc] .logout-btn .mud-icon-root {
        font-size: 21px;
    }

/* Menu de usuário (Implementação do menu de usuário) — todo o CSS do card do menu (cabeçalho,
   avatar, itens, botão Sair) foi movido para `wwwroot/css/user-menu.css` (arquivo global, sem
   escopo do Blazor). Causa raiz confirmada via DevTools: o card (`.mud-popover`) é renderizado
   pelo `MudPopoverProvider` do próprio MudBlazor, não por este componente — nunca carrega o
   atributo de escopo `b-xxxxxxx`, então nenhuma regra `::deep` daqui consegue alcançá-lo, não
   importa a especificidade ou `!important`. Consolidado num arquivo só para não deixar metade das
   regras aqui (que pareciam funcionar) e metade lá — mais simples de manter. */


#blazor-error-ui[b-yw7zk1bvfc] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-yw7zk1bvfc] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/*
  Etapa UI 2 — CSS real para a marcação atual (MudNavMenu/MudNavLink). O conteúdo anterior deste
  arquivo mirava classes do template Blazor padrão (.nav-item, .top-row, .navbar-toggler) que não
  existem mais aqui desde que o menu passou a usar MudBlazor — substituído por regras que realmente
  afetam o componente em uso, sem alterar links/rotas/textos/ícones.

  ETAPA 4H.33 — redesign visual (sidebar escura). As cores da sidebar (--sidebar-*) são definidas em
  `wwwroot/css/sidebar.css` (arquivo GLOBAL, sem escopo do Blazor — ver nota nesse arquivo sobre por
  quê) sobre o elemento .app-sidebar (o próprio MudDrawer) — como custom properties são herdadas por
  qualquer descendente independentemente do isolamento de CSS por componente, este arquivo só as
  consome (var(--sidebar-...)), sem duplicar valores de cor em dois lugares. Nenhuma regra aqui
  altera markup/lógica — só aparência.

  ETAPA 4H.33 (revisão) — todo o estilo de MudNavLink/MudNavGroup (item ativo, hover, desabilitado,
  título de grupo) também foi movido para `wwwroot/css/sidebar.css`. Causa raiz: MudBlazor.min.css
  carrega DEPOIS do bundle escopado deste app mas usa `!important` em algumas regras próprias
  (cor do item desabilitado, peso da fonte do item ativo); quando a regra daqui tinha a mesma
  especificidade + `!important`, o empate ia para quem carrega por ÚLTIMO — e isso não era este
  bundle. `sidebar.css` carrega depois de MudBlazor.min.css, resolvendo o empate a favor deste app de
  forma definitiva. Este arquivo ficou só com os elementos que o MudBlazor não renderiza (logo,
  scroll, ajuda, rodapé) — nada aqui compete com um `!important` de terceiros. */

.nav-menu-shell[b-qltrhcdgxp] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    color: var(--sidebar-text, rgba(255, 255, 255, 0.82));
}

/* Bloco de marca (topo). Só a imagem do logo institucional (ou o "N" compacto, sem logo configurado)
   — nenhum texto de marca mais faz parte deste bloco, em nenhum dos dois estados.

   ETAPA 4H.33 (revisão) — reforço contra overflow/corte: width:100%+box-sizing garantem que o bloco
   nunca ultrapasse a largura real da sidebar (212px) não importa o padding do pai. Centralizado
   (justify-content:center) já que agora é só um elemento único (imagem ou "N"), sem texto ao lado
   pedindo alinhamento à esquerda. */
.nav-menu-logo[b-qltrhcdgxp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 18px 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.nav-menu-logo-marca[b-qltrhcdgxp] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background-color: var(--sidebar-marca-bg, #2563EB);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

/* max-height + max-width (nunca height fixo) é o que evita distorção: com height:auto/width:auto o
   navegador escala mantendo a proporção original da imagem (2035×317px — um wordmark bem largo),
   escolhendo sozinho qual dos dois limites é o mais apertado, em vez de ficar "espremida" por um
   height fixo competindo com um max-width menor que a largura natural naquele height. */
.nav-menu-logo-marca-img[b-qltrhcdgxp] {
    display: block;
    max-height: 32px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Fallback "N" compacto para quando há logo customizado (wordmark largo, sem versão mini sensata) —
   escondido por padrão; só aparece no estado recolhido (ver .mud-drawer--closed em sidebar.css),
   substituindo a imagem, que também some nesse estado. Nunca os dois ao mesmo tempo. */
.nav-menu-logo-mini[b-qltrhcdgxp] {
    display: none;
}

/* Área navegável — cresce para preencher o espaço entre o bloco de marca e o rodapé, com rolagem
   própria quando o conteúdo não couber (nunca a sidebar inteira). */
.nav-menu-scroll[b-qltrhcdgxp] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Estilo de MudNavLink/MudNavGroup (item ativo, hover, desabilitado, grupo) — movido para
   wwwroot/css/sidebar.css nesta revisão. Ver nota no topo do arquivo sobre por quê. */

/* Caixa "Precisa de ajuda?" — só visual, sem chamada de API; reaproveita a rota já existente
   /suporte-tecnico (mesma usada no menu do usuário em MainLayout.razor) em vez de inventar uma nova. */
.nav-menu-ajuda[b-qltrhcdgxp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: var(--sidebar-bg-elevated, rgba(255, 255, 255, 0.08));
    text-decoration: none;
    flex-shrink: 0;
}

.nav-menu-ajuda:hover[b-qltrhcdgxp] {
    background-color: rgba(255, 255, 255, 0.12);
}

.nav-menu-ajuda-icone[b-qltrhcdgxp] {
    color: #FFFFFF;
    flex-shrink: 0;
}

.nav-menu-ajuda-textos[b-qltrhcdgxp] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    white-space: nowrap;
}

.nav-menu-ajuda-titulo[b-qltrhcdgxp] {
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
}

.nav-menu-ajuda-link[b-qltrhcdgxp] {
    font-size: 11px;
    color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.55));
}

.nav-menu-rodape[b-qltrhcdgxp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 12px 16px;
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-menu-rodape-nome[b-qltrhcdgxp] {
    font-size: 11px;
    font-weight: 700;
    color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.55));
}

.nav-menu-rodape-versao[b-qltrhcdgxp] {
    font-size: 10px;
    color: var(--sidebar-text-muted, rgba(255, 255, 255, 0.35));
}

/* Estado recolhido (DrawerVariant.Mini com _drawerOpen=false → .mud-drawer--closed no <aside> que
   envolve este componente): as regras que escondem subtítulo/ajuda/rodapé nesse estado vivem em
   `wwwroot/css/sidebar.css` (arquivo GLOBAL), não aqui. Causa raiz: `.mud-drawer--closed` fica no
   próprio <aside>, que é ANCESTRAL de tudo que este arquivo escreve — nunca um descendente. `::deep`
   só alcança elementos DENTRO da árvore escopada deste componente (Blazor exige o atributo de escopo
   ANTES do primeiro seletor comum na cadeia gerada); pedir um ancestral depois de `::deep` inverte
   essa direção e a regra nunca casa. Confirmado junto com o mesmo defeito em .app-sidebar — ver nota
   em MainLayout.razor.css. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rhlay1vjna],
.components-reconnect-repeated-attempt-visible[b-rhlay1vjna],
.components-reconnect-failed-visible[b-rhlay1vjna],
.components-pause-visible[b-rhlay1vjna],
.components-resume-failed-visible[b-rhlay1vjna],
.components-rejoining-animation[b-rhlay1vjna] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-retrying[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-failed[b-rhlay1vjna],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rhlay1vjna] {
    display: block;
}


#components-reconnect-modal[b-rhlay1vjna] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rhlay1vjna 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rhlay1vjna 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rhlay1vjna 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rhlay1vjna]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rhlay1vjna 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rhlay1vjna {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rhlay1vjna {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rhlay1vjna {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rhlay1vjna] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rhlay1vjna] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rhlay1vjna] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-rhlay1vjna] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-rhlay1vjna] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-rhlay1vjna] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rhlay1vjna] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rhlay1vjna 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rhlay1vjna] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rhlay1vjna {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ETAPA 4H.35 (ajuste final) — hover discreto no avatar clicável da Central de Próximos
   Vencimentos (único elemento de navegação da linha, ver Home.razor). Só isolamento de CSS
   normal (a âncora é escrita dentro deste .razor, então ::deep nem é necessário aqui). */
.vencimento-avatar-link[b-azg9ycelc4] {
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow .15s ease;
}

.vencimento-avatar-link:hover[b-azg9ycelc4] {
    box-shadow: 0 0 0 2px #93C5FD;
}