/* Estilo base do botão */
.navbar a,
.navbar button {
    color: var(--jbPrimary);
    text-decoration: none;
    padding: 8px 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Outfit';
    font-weight: 700;
    border: 1px solid #CCEBFF;
    text-align: center;
}

    /* Efeito hover */
    .navbar a:hover,
    .navbar button:hover {
        background-color: #0d6efd;
        color: #ffffff;
        border-radius: 25px;
    }

.navbar-nav .nav-link:hover {
    color: var(--jbPrimaryLight) ;
    background-color: var(--jbPrimaryDark);
    transition: all 0.2s ease;
    border-radius: 25px;
    font-weight: 400;
}

.navbar-nav .nav-link {
    color: var(--jbPrimaryDark) ;
    background-color: var(--jbPrimaryLight) ;
    transition: all 0.2s ease;
    border-radius: 25px;
    padding: 5px 15px;
    margin-inline-end: 5px;
    font-weight: 400;
}

/* item selecionado (controller ativo): fundo azul primary. Especificidade (0,3,0) vence o fundo base e o hover base. */
.navbar-nav .nav-link.jb-nav-active {
    background-color: var(--jbPrimaryDark);
    color: #fff;
}
.navbar-nav .nav-link.jb-nav-active:hover {
    background-color: var(--jbPrimaryDark);
    color: #fff;
}

/* Sign up: o unico botao cheio do par Log in / Sign up, para o olho ir para o registo; o Log in fica
   na pill clara. Mesma especificidade (0,3,0) do jb-nav-active. Na navbar azul as cores invertem-se
   (regra .jb-navbar-landing .nav-link.jb-nav-signup, mais abaixo). */
.navbar-nav .nav-link.jb-nav-signup {
    background-color: var(--jbPrimaryDark);
    color: #fff;
}
.navbar-nav .nav-link.jb-nav-signup:hover {
    background-color: var(--jbPrimary);
    color: #fff;
}

/* Link secundario (API): le como texto esbatido em vez de pill, para nao competir com os
   itens principais. Precisa de !important pelas mesmas razoes que o .jb-landing-link -
   tem de vencer o fundo de .navbar-nav .nav-link e a borda de ".navbar a". */
.navbar-nav .nav-link.jb-nav-subtle {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--jbPrimaryDark);
    opacity: 0.6;
    font-weight: 400;
}

.navbar-nav .nav-link.jb-nav-subtle:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--jbPrimaryDark);
    opacity: 1;
}

/* Quando e' o controller ativo volta ao tratamento normal de item selecionado. */
.navbar-nav .nav-link.jb-nav-subtle.jb-nav-active,
.navbar-nav .nav-link.jb-nav-subtle.jb-nav-active:hover {
    background-color: var(--jbPrimaryDark) !important;
    color: #fff;
    opacity: 1;
}


.jmNavUpgrade {
    background-color: #fff !important;
    color: #ffa71e !important;
    border-color: #ffa71e !important;
    transition: 0.5s !important;
    box-shadow: 0 0 5px #ffa71e !important;    
}

.jmNavUpgrade:hover {
    background-color: #ffa71e !important;
    color: #fff !important;
    border-color: #ffa71e !important;
    transition: 0.2s;
    box-shadow: 0 0 10px #ffa71e !important;
}





.nav-item {
    min-width: 130px;
}

/* Sem os 150px dos restantes: o item fica com a largura do conteudo e pesa menos. */
.jb-nav-item-subtle {
    min-width: unset;
}

.navHome {
    background-color: white !important;
    color: var(--jbPrimaryDark) !important;
    font-weight: 700;
    border: none !important;
    border-radius: 20px;
}

    .navHome:hover {
        background-color: var(--jbPrimaryDark) !important;
        color: white !important;
        font-weight: 700;
    }

.dropdown-menu {
    border-radius: 10px;
    border: 1px solid var(--jbPrimaryLight);
    padding: 4px 0;
}


    .dropdown-menu .dropdown-item {
        background-color: transparent !important;
        color: var(--jbPrimaryDark) !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 8px 16px;
        font-family: 'Outfit';
        transition: background-color 0.2s ease, color 0.2s ease;
        text-align: left;
    }

        .dropdown-menu .dropdown-item:hover {
            background-color: var(--jbPrimaryDark) !important;
            color: white !important;
        }

        /* Qual das sub-paginas esta aberta. O .active do Bootstrap nao chega aqui: a regra
           acima poe background-color transparent com !important por cima dele. */
        .dropdown-menu .dropdown-item.jb-dropdown-current {
            background-color: var(--jbPrimaryLight) !important;
            font-weight: 600;
        }

.jbNavNotification {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    opacity: 0.8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative; /* ancora o badge de notificacoes por ler */
}

.jbNavNotificationItem {
    min-width: unset;
    /* flex em vez de bloco: elimina o espaco de linha-base por baixo do <a> inline-flex,
       que fazia o item do logo ficar mais alto quando havia foto */
    display: flex;
    align-items: center;
}

/* badge de notificacoes por ler (estilo LinkedIn/GitHub): so aparece quando ha nao lidas */
.jmNotifBadge {
    position: absolute;
    top: -5px;
    inset-inline-end: -6px;
    min-width: 10px;
    height: 14px;
    padding: 0 5px;
    border-radius: 7px;
    background-color: #dc3545;
    color: #ffffff;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    text-align: center;
    border: 2px solid #ffffff;
    box-sizing: content-box;
    pointer-events: none;
}

/* botao de logo na navbar: mesmo estilo redondo do sino (jbNavNotification), preenchendo o circulo.
   transition tem opacity/box-shadow/transform (o bloco base ".navbar a" so' cobre
   background-color/color) para o hover animar. */
.jbNavLogoLink {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 50% !important;
    flex: 0 0 auto;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Só com imagem. O modificador vem do Razor (_NavBarPartial) e nao do CSS de proposito:
   distinguir "tem <img>" de "tem <i> de fallback" so' com seletores obrigava a :has(), e o
   estado ja' e' conhecido no servidor (CompanyLogoViewModel.HasLogo).

   opacity:1 sobrepoe-se ao .jbNavNotification 0.8 - a opacidade do pai composita toda a
   subarvore, por isso nao dava para corrigir so' na img; tinha de ser no link. O logo mostra
   as cores reais, iguais as' do perfil da empresa. Consequencia: o hover de fundo do
   .nav-link:hover fica invisivel por baixo de uma imagem opaca, logo o feedback passa a ser
   um anel + leve zoom.

   Sem imagem o link fica so' com .jbNavNotification e comporta-se exatamente como o sino:
   opacidade 0.8 e preenchimento de fundo no hover. */
.jbNavLogoLink--hasLogo {
    opacity: 1;
}

.jbNavLogoLink--hasLogo:hover {
    box-shadow: 0 0 0 3px var(--jbPrimaryDark);
    transform: scale(1.06);
}

/* Caso sem imagem (fallback): o icone e' um <i>, tal como o sino, por isso deve comportar-se
   exatamente como ele - fundo transparente para o background-color do .nav-link:hover (definido
   em cima, linha ~22) aparecer, e cor herdada do link em vez da cor fixa do site.css. Sem isto o
   fundo proprio do fallback (site.css .jb-company-logo-fallback) tapava o hover do link, tal como
   a imagem tapava - o mesmo bug, duas causas diferentes. */
.jbNavLogoLink .jb-company-logo-fallback {
    background-color: transparent;
    color: inherit;
}

/* O grupo da direita (sino + logo + utilizador) nunca deve quebrar para a linha seguinte,
   haja ou nao foto de empresa. */
.jbNavRight {
    flex-wrap: nowrap !important;
}
.jbNavRight > .nav-item {
    flex: 0 0 auto;
}
.jbNavLogoLink .jb-company-logo,
.jbNavLogoLink .jb-company-logo-fallback {
    border: none;
    border-radius: 50%;
    object-fit: cover;
    padding: 0;
}

/* Variante da landing page: navbar de fundo azul + links planos claros.
   Só aplica quando a partial recebe ViewData["LandingNav"]; as outras paginas ficam inalteradas. */
.jb-navbar-landing {
    background-color: var(--jbPrimaryDark);
}

.jb-navbar-landing .navHome {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.jb-navbar-landing .navHome:hover {
    color: var(--jbPrimaryLight) !important;
    background-color: transparent !important;
}

.jb-navbar-landing .nav-item {
    min-width: unset;
}

.jb-navbar-landing .nav-link:hover {
    color: var(--jbPrimaryLight);
    background-color: var(--jbPrimaryDark);
    transition: all 0.2s ease;
    border-radius: 25px;
    font-weight: 400;
}

.jb-navbar-landing .nav-link {
    color: var(--jbPrimaryDark);
    background-color: var(--jbPrimaryLight);
    transition: all 0.2s ease;
    border-radius: 25px;
    padding: 5px 15px;
    margin-inline-end: 5px;
    font-weight: 400;
}

/* Os links para as seccoes da pagina (jb-landing-link) leem como texto claro plano sobre o azul.
   Sem margem: sao texto, e o espaco entre eles ja' vem do padding - os 5px a mais pesavam nas
   paginas com 7 seccoes. Login/Register nao levam esta classe, levam a jb-landing-lr-link. */
.jb-navbar-landing .jb-landing-link {
    background-color: transparent !important;
    color: var(--jbPrimaryLight) !important;
    border: none !important;
    font-weight: 400;
    margin-inline-end: 0;
}

.jb-navbar-landing .jb-landing-link:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Sem min-width: com os 150px de antes, o Login/Register ao lado de 7 seccoes nao cabia numa linha
   a 1400px em varias linguas. A pill fica com a largura do texto. */
    .jb-navbar-landing .jb-landing-lr-link {
        color: var(--jbPrimaryLight);
        background-color: var(--jbPrimaryDark);
        transition: all 0.2s ease;
        border-radius: 25px;
        padding: 5px 15px;
        margin-inline-end: 5px;
        font-weight: 400;
    }

.jb-navbar-landing .jb-landing-lr-link:hover {
    color: var(--jbPrimaryDark);
    background-color: var(--jbPrimaryLight);
    transition: all 0.2s ease;
    border-radius: 25px;
    font-weight: 400;
}

/* Na navbar azul o Sign up e' a pill clara cheia, como o CTA do hero (btn-jb-primary-landing), e o
   Log in fica so' com o contorno. O Sign up leva tambem a jb-landing-lr-link (tamanho e nowrap): esta
   regra vem depois da branca, com a mesma especificidade, e ganha-lhe nas paginas publicas. */
.jb-navbar-landing .nav-link.jb-nav-signup {
    color: var(--jbPrimaryDark);
    background-color: var(--jbPrimaryLight);
}
.jb-navbar-landing .nav-link.jb-nav-signup:hover {
    color: var(--jbPrimaryLight);
    background-color: var(--jbPrimaryDark);
    border-color: var(--white-75);
}

/* A partir de 1400px (o navbar-expand-xxl) a navbar abre numa linha, e nas paginas com mais seccoes
   (a Privacy tem 7) em linguas longas a lista nao cabe ao lado dos botoes ate' ~1550px. Sem isto cada
   link partia o texto em duas linhas dentro da pill; assim a lista passa inteira para uma segunda fila
   e os botoes da direita mantem o tamanho. Abaixo de 1400px a navbar esta' colapsada. */
@media (min-width: 1400px) {
    .jb-navbar-landing .jb-landing-sections {
        flex-wrap: wrap;
    }

    .jb-navbar-landing .jb-landing-actions {
        flex-shrink: 0;
    }

    .jb-navbar-landing .jb-landing-link,
    .jb-navbar-landing .jb-landing-lr-link {
        white-space: nowrap;
    }
}

/* Seletor de idioma: so' mostra bandeira + seta, por isso nao leva largura minima de pill
   nenhuma. Nao vai scoped em .jb-navbar-landing porque o seletor tambem aparece na
   navbar branca (ex. /Account/Login) - isto e' layout do botao, nao
   paleta. Alvo .dropdown-toggle para nao depender de qual das classes de pill a partial
   aplicou. Mesma especificidade que .jb-navbar-landing .jb-landing-lr-link: ganha por vir
   depois. */
.jbLanguageSwitcher .dropdown-toggle {
    min-width: 0;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Avatar do utilizador antes do nome, no toggle do dropdown. inline-flex porque o
   .jb-company-logo e' display:block (deliberado, ver site.css) e sozinho quebrava a linha.
   Padding reduzido do lado do avatar para este nao empurrar a pill para fora do alinhamento
   com o sino e o logo da empresa, que sao circulos de 40px. */
.jbNavUserToggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-inline-start: 5px !important;
}

/* O circulo vem de .jbNavLogoLink .jb-company-logo, que e' scoped ao botao da empresa e
   nao se aplica aqui - por isso repete-se para esta variante. */
    .jbNavUserToggle .jbNavAvatar {
        border: none;
        border-radius: 50%;
        object-fit: cover;
        width: 30px;
        height: 30px;
        border: 1px solid #ccebff;
    }

/* Sem foto, o fallback do _CompanyLogo tem fundo --jbPrimaryLight, que e' exatamente a cor
   da pill do dropdown: o circulo desaparecia. Invertido, o [avatar] Nome mantem a mesma
   forma com e sem foto e a navbar nao salta quando alguem carrega uma pela primeira vez. */
.jbNavUserToggle .jb-company-logo-fallback.jbNavAvatar {
    background-color: var(--jbPrimaryDark);
    color: var(--jbPrimaryLight);
}

/* O :hover do .nav-link inverte o fundo da pill para --jbPrimaryDark; o fallback tem de
   acompanhar, senao o circulo escuro funde-se com o fundo escuro. */
.jbNavUserToggle:hover .jb-company-logo-fallback.jbNavAvatar {
    background-color: var(--jbPrimaryLight);
    color: var(--jbPrimaryDark);
}

/* O <a> acima larga os 150px, mas o proprio <li>.nav-item continuava com o
   min-width: 150px comum - a bandeira ficava encostada a' esquerda de uma caixa
   de 150px, criando um vao ate' ao botao Entrar. Encolher tambem o <li> cola o
   seletor ao botao seguinte com o gap normal. */
.jbLanguageSwitcher {
    min-width: 0;
}

/* Sem isto o pill encolhia para a altura da bandeira e ficava mais baixo que o
   Login/Register ao lado (36px vs 27px expandido, 43px vs 37px colapsado). Este item
   flex de largura zero repoe a caixa de linha que o texto dos outros botoes cria, por
   isso a altura acompanha sozinha os dois modos da navbar (o padding vertical muda no
   media query abaixo) em vez de depender de um min-height fixo. */
.jbLanguageSwitcher .dropdown-toggle::before {
    content: "";
    width: 0;
    height: 1.5em;
}

/* A bandeira e' 4x3; o object-fit evita distorcao se a proporcao mudar. */
.jbFlag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Fallback textual para culturas fora de SupportedCultures (ver a partial). */
.jbFlagFallback {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.jbLanguageOption {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A lista dos idiomas em duas colunas, lidas de cima para baixo (11 + 10): numa so' eram 21 linhas, ~850px,
   que pediam scroll na maioria dos portateis. column-count e nao grid: as colunas enchem pela ordem de
   SupportedCultures.All sem contar linhas, e num idioma RTL comecam a' direita sozinhas. A largura chega para
   o nome mais comprido numa linha; num telemovel estreito fica pela largura do ecra e um nome longo parte em
   duas linhas (o nowrap do Bootstrap deixava-o invadir a outra coluna). O max-height so' entra em ecras
   baixos (telemovel deitado). */
.jbLanguageSwitcher .jbLanguageMenu {
    column-count: 2;
    column-gap: 0;
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

    .jbLanguageSwitcher .jbLanguageMenu > li {
        break-inside: avoid;
    }

    .jbLanguageSwitcher .jbLanguageMenu .dropdown-item {
        white-space: normal;
    }

/* Menu colapsado (abaixo de 1400px, o breakpoint do navbar-expand-xxl): os pills nao tinham
   margem vertical nenhuma e ficavam colados. Da-se respiro e area de clique mais confortavel.
   O :not(.jbNavNotification) protege o sino e o logo, que sao circulos de 40x40 fixos. */
@media (max-width: 1399.98px) {
    .navbar-collapse .navbar-nav .nav-item {
        margin-bottom: 8px;
    }

    .navbar-collapse .navbar-nav .nav-link:not(.jbNavNotification) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Colapsado, o menu dos idiomas abre dentro da navbar (position static) a partir do <li> da bandeira,
       centrado e muito mais estreito que ele: num telemovel saia do ecra pela direita. O <li> passa a ocupar a
       linha, com a bandeira ao centro, e o menu centra-se nele - em LTR e em RTL. */
    .navbar-collapse .jbLanguageSwitcher {
        align-self: stretch;
        text-align: center;
    }

    .navbar-collapse .jbLanguageSwitcher .jbLanguageMenu {
        margin-inline: auto;
    }
}