/* FanTR Cooling — Navbar (Sub-fase 1.4)
   Estilos para elementos novos da navbar: logo, active-lang, responsivo.
   Os estilos base da navbar (.main-navbar, .lang-btn, etc.) estão em assets/styles.css
   (carregado depois, portanto tem prioridade sobre este arquivo).
*/

/* ── Logo — Sub-fase 1.4b
   align-self: stretch faz o <a> ocupar os 56px completos da navbar.
   height: 100% na <img> preenche esse espaço, encostando no topo e no rodapé.
   ─────────────────────────────────────────────────────────────────────────── */
.navbar-logo {
    display: flex;
    align-items: center;
    align-self: stretch;
    text-decoration: none !important;
    flex-shrink: 0;
    padding: 0 var(--space-2, 8px);
    margin-right: var(--space-2, 8px);
    outline: none;
}

/* Sub-fase 7.1: o logo deixava de caber em telas pequenas (height:100% da
   navbar + largura intrínseca da arte). Limitamos a altura (max-height) para
   conter a largura proporcionalmente (object-fit: contain — sem distorção) e
   mantemos a largura mínima de marca (75px, IDENTIDADE_VISUAL §4). */
.navbar-logo-img {
    height: 100%;
    max-height: 40px;
    width: auto;
    min-width: 75px;
    object-fit: contain;
    display: block;
}

/* ── Active language button ───────────────────────────────────────────────── */
/* Classe aplicada via callback Python ao botão do idioma ativo */
.lang-btn.lang-active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #345a74 !important;
    font-weight: 700 !important;
}

/* ── Nome do projeto no navbar (Sub-fase 7.7) ─────────────────────────────── */
/* Reflete o campo "Projeto" do modal de Projeto (gatilho no sidebar). Texto
   branco discreto sobre o chrome escuro; elide com reticências e tem largura
   máxima para não competir com o menu de usuário em telas médias. */
.navbar-project-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    max-width: 32vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.92;
}

.navbar-project-name:empty {
    display: none;
}

/* ── Botão Help — Manual do Cliente (Sub-fase 16.1) ───────────────────────── */
/* Ícone discreto à esquerda do menu de usuário; abre `/ajuda` em nova aba.
   Mesmo vocabulário de interação do gatilho do menu de usuário (.user-info). */
.navbar-help {
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1;
    text-decoration: none !important;
    transition: background var(--transition-fast, 120ms ease),
                color var(--transition-fast, 120ms ease);
}

.navbar-help:hover,
.navbar-help:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* ── Menu de usuário — card flutuante (Sub-fase 7.1) ──────────────────────── */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

/* Trigger: ícone de usuário clicável */
.user-info {
    cursor: pointer;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background var(--transition, 0.2s ease);
}

.user-info:hover {
    background: rgba(255, 255, 255, 0.12);
}

.user-caret {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}

/* Card do usuário — fundo escuro alinhado à navbar (texto branco, §2/§3) */
.user-menu-card {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    max-width: calc(100vw - 24px);
    background: var(--bg-sidebar, #345a74);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
    padding: 14px 16px;
    z-index: var(--z-navbar-menu);
}

.user-menu-card--open {
    display: block;
}

.user-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-menu-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.user-menu-email {
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px;
    line-height: 1.3;
    word-break: break-all;
}

.user-menu-divider {
    border-color: rgba(255, 255, 255, 0.12) !important;
    margin: 10px 0 !important;
    opacity: 1;
}

.user-menu-langs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.user-menu-langs .lang-btn {
    flex: 1;
    min-width: 0;
}

.user-menu-card .btn-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Link "Termos de uso" no menu de usuário (Sub-fase 12.5) — leitura da versão
   vigente; largura total e margem inferior separando do botão login/logout. */
.user-menu-card .user-menu-termos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

/* ── Responsivo ───────────────────────────────────────────────────────────── */
/* Sub-fase 7.7 — Salvar/Abrir migraram para o sidebar; o navbar agora carrega
   só logo + título + nome do projeto + menu de usuário, o que resolve o estouro
   do logo na faixa 576–767px. */
@media (max-width: 767.98px) {
    /* Gatilho do menu de usuário e hambúrguer: alvo de toque ≥44px
       (Regra de Ouro 3 — área de toque mínima). */
    .user-info {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }
    .sidebar-toggle {
        min-height: 44px;
        min-width: 44px;
    }
    /* Help (16.1): mesmo alvo de toque mínimo do menu de usuário. */
    .navbar-help {
        min-height: 44px;
        min-width: 44px;
    }
    /* Nome do projeto cede espaço antes do menu de usuário. */
    .navbar-project-name {
        max-width: 28vw;
        font-size: 12px;
    }
    /* Título decorativo ("Cooling Software") sai já no tablet/phone: na faixa
       576–767px ele competia por espaço com o nome do projeto + menu de usuário
       (sem ellipsis/flex-shrink, podia empurrar o layout). O nome do projeto
       segue visível até <576px (informação útil), e o título permanece no
       desktop. 7.12. */
    .navbar-page-title {
        display: none;
    }
}

/* Telas estreitas (≤575.98px): o título e o nome do projeto competem com o
   logo; ocultá-los libera espaço (o projeto segue acessível no modal/aba). */
@media (max-width: 575.98px) {
    .navbar-logo-img {
        max-height: 34px;
        min-width: 75px;
    }
    .navbar-page-title,
    .navbar-project-name {
        display: none;
    }
}