/*
 * CAMADA 6 — COMPONENTES · NAVEGAÇÃO
 *
 * Conteúdo permitido: a barra superior (templates/menuSuperior.handlebars), o
 * menu lateral (templates/menuEsquerda.handlebars) e o seletor de idiomas —
 * incluindo a gaveta de 72px do mobile.
 *
 * Só o que é navegação. Os botões da barra superior aparecem aqui pelo
 * tamanho/posição; a troca rótulo → ícone deles está em component.buttons.css,
 * junto com a de todos os outros botões.
 */


/* ==========================================================================
   1. BARRA SUPERIOR
   ========================================================================== */

.navbar-no-margin {
    margin-bottom: 0;
}

.navbar-item-wide {
    min-width: 300px;
}

.btChangeLanguage {
    cursor: pointer;
}


/* ==========================================================================
   2. SELETOR DE IDIOMAS
   ========================================================================== */

.language-selector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 50px;
    padding: 0 6px;
}

.language-picker-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 68px;
    height: 34px;
    padding: 6px 10px;
    border: var(--border-thin);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    background: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.language-picker-toggle:hover,
.language-picker-toggle:focus-visible,
.language-selector.open .language-picker-toggle {
    border-color: var(--color-secondary);
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.language-picker-toggle:focus:not(:focus-visible) {
    outline: none;
}

.language-picker-flag {
    display: block;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgb(47 64 80 / 15%);
}

.language-picker-toggle .caret {
    margin-left: 1px;
}

.language-picker-menu.dropdown-menu {
    min-width: 190px;
    margin-top: 4px;
    padding: 6px;
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.language-picker-item + .language-picker-item {
    margin-top: 3px;
}

.language-picker-option {
    display: grid;
    grid-template-columns: 22px minmax(90px, 1fr) auto 14px;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    border: var(--border-none);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--color-transparent);
    text-align: left;
    cursor: pointer;
}

.language-picker-option:hover,
.language-picker-option:focus-visible,
.language-picker-item.active .language-picker-option {
    color: var(--color-primary);
    background: var(--color-surface-muted);
}

.language-picker-option:focus:not(:focus-visible) {
    outline: none;
}

.language-picker-name {
    font-weight: 700;
}

.language-picker-short {
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
}

.language-picker-option .fa-check {
    color: var(--color-success);
}

/* Na tela de login o seletor fica centralizado, fora da barra superior. */
.login-language-selector {
    display: flex;
    justify-content: center;
    margin: 4px 0 14px;
}

.login-language-selector .language-picker-menu {
    right: 50%;
    left: auto;
    transform: translateX(50%);
}


/* ==========================================================================
   3. ÍCONES DO MENU LATERAL
   ========================================================================== */

.menu-esquerda-icon .icon {
    display: block;
    width: 18px;
    height: 18px;
    color: inherit;
}

.menu-esquerda-icon .icon-stroke {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-esquerda-icon .icon-fill {
    fill: currentcolor;
}

.icon-flipped {
    transform: rotate(180deg);
    transform-origin: center;
}


/* ==========================================================================
   4. MENU LATERAL
   ========================================================================== */

#menuEsquerda {
    color: var(--color-primary);
    background-color: var(--color-menu-background) !important;
}

#side-menu .nav-item-current {
    background-color: var(--color-menu-highlight);
    border: var(--border-thin-white);
    outline: none;
}

#side-menu > li:not(.nav-item-current) {
    background-color: var(--color-menu-background);
    border: var(--border-none);
}

#menuEsquerda #side-menu > li.active:not(.nav-item-current) {
    border-left-color: var(--color-menu-active-border);
    background-color: var(--color-menu-highlight);
}

body.mini-navbar #menuEsquerda .nav-header {
    background-color: var(--color-success);
}

#menuEsquerda #side-menu > li > a {
    color: var(--color-menu-text);
}

#menuEsquerda #side-menu > li > a:hover,
#menuEsquerda #side-menu > li > a:focus,
#menuEsquerda #side-menu > li.nav-item-current > a,
#menuEsquerda #side-menu > li.active > a {
    color: var(--color-white);
    background-color: var(--color-menu-highlight);
}

#menuEsquerda #side-menu > li > a:hover :is(.nav-label, i),
#menuEsquerda #side-menu > li > a:focus :is(.nav-label, i),
#menuEsquerda #side-menu > li.nav-item-current > a :is(.nav-label, i),
#menuEsquerda #side-menu > li.active > a :is(.nav-label, i) {
    color: inherit;
}

#menuEsquerda .nav-header .text-muted {
    color: var(--color-menu-muted);
}

/* Item "Projeto": ícone e rótulo alinhados na mesma linha. */
.menuProjeto a {
    display: flex !important;
    align-items: center;
}

.menuProjeto a i {
    margin-right: 10px;
}

/* Sem projeto aberto, os itens de projeto ficam desabilitados. */
#menuEsquerda #side-menu > li.menuProjeto > a[aria-disabled="true"],
#menuEsquerda #side-menu > li.menuProjeto > a[aria-disabled="true"]:hover,
#menuEsquerda #side-menu > li.menuProjeto > a[aria-disabled="true"]:focus {
    color: var(--color-danger);
    background-color: var(--color-menu-background);
    cursor: not-allowed;
}

#menuEsquerda #side-menu > li.menuProjeto > a[aria-disabled="true"] :is(.nav-label, .menu-esquerda-icon) {
    color: inherit;
}

/* js/page.menuEsquerda.js usa .needHighlight para piscar o item recém-liberado. */
.needHighlight:focus {
    outline: none !important;
    box-shadow: var(--shadow-none) !important;
}

@scope (:root[data-theme="mafmine"]) {
    #menuEsquerda .nav-header .dropdown-toggle {
        color: var(--color-white);
    }

    #menuEsquerda .dropdown-menu > li > a {
        color: var(--color-primary);
        background-color: var(--color-white);
    }

    #menuEsquerda .dropdown-menu > li > a:hover,
    #menuEsquerda .dropdown-menu > li > a:focus {
        color: var(--color-white);
        background-color: var(--color-menu-highlight);
    }
}


/* ==========================================================================
   5. PERFIL DO USUÁRIO
   ========================================================================== */

/*
 * Avatar e nome do usuário: usados apenas no rail de 72px do mobile (seção 6).
 * No desktop o bloco de perfil já mostra o nome.
 */
.profile-avatar,
.dropdown-user-name {
    display: none;
}


/* ==========================================================================
   6. MOBILE — <= 768px
   ==========================================================================
 * Casa com o body.body-small, que o libs/inspinia.js aplica em width < 769px.
 */

@media (max-width: 768px) {

    /* -- 6.1 Barra superior ------------------------------------------------ */

    /*
     * Dois .navbar-item-wide com min-width: 300px somam ~600px e são a causa
     * direta do scroll horizontal em celular.
     */
    .navbar-item-wide {
        min-width: 0;
    }

    .navbar-static-top .navbar-top-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin-right: 6px;
    }

    .navbar-static-top .navbar-top-links > li {
        float: none;
    }

    /*
     * theme.inspinia.css esconde .nav.navbar-top-links li.dropdown abaixo de
     * 350px, o que fazia o seletor de idiomas sumir em telas pequenas. Mesma
     * especificidade, e este arquivo carrega depois do tema.
     */
    .nav.navbar-top-links li.dropdown {
        display: flex;
    }

    #btnReportIssue,
    #btnCreditos {
        display: inline-flex;
        min-width: 40px;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
    }

    /* -- 6.2 Botão de abrir/fechar o menu ---------------------------------- */

    /*
     * Fixo, para acompanhar o scroll. Sem isso o botão fica preso no topo do
     * documento e some assim que a página rola.
     */
    .navbar-minimalize.minimalize-styl-2 {
        position: fixed;
        z-index: 2050;
        top: 8px;
        left: 8px;
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        transition: left 200ms ease;
    }

    /* Com a gaveta aberta o botão desliza para o lado dela em vez de ficar por cima. */
    body.body-small.mini-navbar .navbar-minimalize.minimalize-styl-2 {
        left: 80px;
    }

    /* Reserva o espaço que o botão deixou de ocupar no fluxo. */
    .navbar-static-top .navbar-header {
        display: block;
        float: left;
        width: 56px;
        min-height: 50px;
    }

    /* -- 6.3 Menu lateral: rail de 72px ------------------------------------ */

    /*
     * Em mobile a lógica do Inspinia é invertida: a barra nasce display:none e é
     * a classe .mini-navbar que a REVELA (theme.inspinia.css:8145-8153). Por isso
     * todo este bloco é prefixado por body.body-small.mini-navbar = "gaveta aberta".
     */
    body.body-small.mini-navbar .navbar-static-side {
        position: fixed;
        z-index: 2040;
        top: 0;
        bottom: 0;
        left: 0;
        width: 72px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fundo escurecido sobre o conteúdo; o clique é tratado em js/page.menuSuperior.js. */
    body.body-small.mini-navbar #page-wrapper::before {
        content: '';
        position: fixed;
        z-index: 2030;
        inset: 0;
        background: var(--color-overlay);
    }

    /* Cabeçalho de perfil: avatar no lugar do nome, que não caberia em 72px. */
    body.body-small.mini-navbar #menuEsquerda .nav-header {
        padding: 12px 0;
        background-image: none;
        text-align: center;
    }

    /* Desfaz o display:none que o .mini-navbar do desktop aplica ao bloco de perfil. */
    body.body-small.mini-navbar #menuEsquerda .profile-element {
        display: block;
    }

    body.body-small.mini-navbar #menuEsquerda .profile-element .clear {
        display: none;
    }

    body.body-small.mini-navbar #menuEsquerda .logo-element {
        display: none;
    }

    body.body-small.mini-navbar #menuEsquerda .profile-avatar {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        margin: 0 auto;
        border: var(--border-thin-white);
        border-radius: var(--radius-pill);
        color: var(--color-white);
        background-color: var(--color-menu-highlight);
        font-size: 18px;
    }

    /* Itens do menu: só ícone, centralizado, com alvo de toque de 48px. */
    body.body-small.mini-navbar #side-menu > li > a {
        justify-content: center;
        min-height: 48px;
        padding: 14px 0;
    }

    body.body-small.mini-navbar #side-menu .nav-label {
        display: none;
    }

    body.body-small.mini-navbar #side-menu .menuProjeto a i {
        margin-right: 0;
    }

    body.body-small.mini-navbar #side-menu .menu-esquerda-icon .icon,
    body.body-small.mini-navbar #side-menu .fa {
        width: 22px;
        height: 22px;
        font-size: 20px;
    }

    /*
     * Menu do usuário como painel sobreposto ao lado do rail — dentro de 72px o
     * dropdown padrão do Bootstrap ficaria ilegível.
     */
    body.body-small.mini-navbar #menuEsquerda .profile-element.open > .dropdown-menu {
        position: fixed;
        z-index: 2060;
        top: 8px;
        right: 8px;
        left: 80px;
        width: auto;
        max-height: calc(100vh - 16px);
        min-width: 0;
        margin: 0;
        overflow-y: auto;
    }

    /* É aqui que o nome completo do usuário aparece em mobile. */
    body.body-small.mini-navbar #menuEsquerda .dropdown-user-name {
        display: block;
        padding: 10px 16px;
        border-bottom: var(--border-thin);
        color: var(--color-primary);
        font-weight: 700;
        word-break: break-word;
    }

    body.body-small.mini-navbar #menuEsquerda .dropdown-menu > li > a {
        padding: 10px 16px;
        white-space: normal;
    }
}