/* =======================================================
   FpE — TOPBAR DARK (identidade "verdinho" do Arsenal)
   Entregas 2026.11.01.1 e 2026.11.01.2

   Escopo: tudo aqui vale só dentro de .fpe-topbar-global.fpe-theme-dark.
   A especificidade maior garante que vence as regras claras antigas do
   fpe.css, mesmo quando uma cópia antiga dele vier do cache depois.
   Os tokens ficam no escopo da barra; na migração geral do tema dark
   basta subi-los para :root.
======================================================= */

.fpe-topbar-global.fpe-theme-dark {
    /* Superfícies (Arsenal Core) */
    --fpe-tb-bg: rgba(19, 19, 20, 0.9);       /* #131314 */
    --fpe-tb-panel: #1e1f20;
    --fpe-tb-panel-2: #242526;
    --fpe-tb-border: #444746;
    --fpe-tb-border-olive: #444b35;

    /* Texto */
    --fpe-tb-text: #e3e3e3;
    --fpe-tb-text-muted: #c4c7c5;
    --fpe-tb-icon: #858a85;

    /* O verdinho */
    --fpe-tb-green: #b9f227;
    --fpe-tb-green-soft: rgba(185, 242, 39, 0.1);
    --fpe-tb-green-line: rgba(185, 242, 39, 0.3);

    /* Perigo (sair) */
    --fpe-tb-danger: #ff8c82;
    --fpe-tb-danger-soft: rgba(234, 67, 53, 0.1);
    --fpe-tb-danger-line: rgba(234, 67, 53, 0.28);

    background: var(--fpe-tb-bg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--fpe-tb-border-olive);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    color: var(--fpe-tb-text);
    color-scheme: dark;
}

/* Logo: o PNG atual é preto/cinza; invert + hue-rotate deixa o
   "Enem" branco e o selo "FÍSICA PARA O" preto sobre branco.
   Com um logo próprio para fundo escuro (filtro fpe_logo_dark_url),
   a classe .is-native-dark desliga o filtro. */
.fpe-topbar-global.fpe-theme-dark .fpe-brand-logo-top,
.fpe-topbar-global.fpe-theme-dark .fpe-mobile-drawer-header img {
    filter: invert(1) hue-rotate(180deg);
}
.fpe-topbar-global.fpe-theme-dark .fpe-brand-logo-top.is-native-dark,
.fpe-topbar-global.fpe-theme-dark .fpe-mobile-drawer-header img.is-native-dark {
    filter: none;
}

/* Botões hambúrguer / fechar.
   Blindados contra o estilo de <button> do tema (borda rosa e display),
   que vazava no Explorador e mostrava o hambúrguer no desktop. */
.fpe-topbar-global.fpe-theme-dark .btn-mobile-menu,
.fpe-topbar-global.fpe-theme-dark .btn-close-mobile {
    display: none;
    background: transparent;
    border: 0;
    border-radius: 10px;
    padding: 6px 8px;
    margin: 0;
    box-shadow: none;
    line-height: 1;
    font-size: 22px;
    color: var(--fpe-tb-text);
    cursor: pointer;
}
.fpe-topbar-global.fpe-theme-dark .btn-mobile-menu:hover,
.fpe-topbar-global.fpe-theme-dark .btn-close-mobile:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* ---------- Links principais ---------- */
.fpe-topbar-global.fpe-theme-dark .fpe-top-link {
    color: var(--fpe-tb-text-muted);
    background: transparent;
    box-shadow: none;
}
.fpe-topbar-global.fpe-theme-dark .fpe-top-link i {
    color: var(--fpe-tb-icon);
    transition: color 0.2s;
}
.fpe-topbar-global.fpe-theme-dark .fpe-top-link:hover,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:hover > .fpe-top-link,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:focus-within > .fpe-top-link {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.fpe-topbar-global.fpe-theme-dark .fpe-top-link:hover i,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:hover > .fpe-top-link i,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:focus-within > .fpe-top-link i {
    color: #ffffff;
}

/* Ativo: fundo verdinho translúcido + ícone verdinho */
.fpe-topbar-global.fpe-theme-dark .fpe-top-link.active {
    background-color: var(--fpe-tb-green-soft);
    color: var(--fpe-tb-text);
    box-shadow: inset 0 0 0 1px var(--fpe-tb-green-line);
}
.fpe-topbar-global.fpe-theme-dark .fpe-top-link.active i {
    color: var(--fpe-tb-green);
}


/* Foco por teclado */
.fpe-topbar-global.fpe-theme-dark a:focus-visible,
.fpe-topbar-global.fpe-theme-dark button:focus-visible {
    outline: 2px solid var(--fpe-tb-green);
    outline-offset: 2px;
}

/* ---------- Dropdowns ---------- */
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-menu {
    background: var(--fpe-tb-panel);
    border: 1px solid var(--fpe-tb-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
/* Abre também com teclado (Tab), não só com o mouse */
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:focus-within .fpe-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item {
    color: var(--fpe-tb-text-muted);
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item i {
    color: var(--fpe-tb-icon);
    width: 16px;
    text-align: center;
    transition: color 0.2s;
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item:hover,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item:hover i,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item:focus-visible i {
    color: var(--fpe-tb-green);
}

/* Item ativo dentro do dropdown: mesmo idioma do item ativo da barra,
   com um filete verdinho à esquerda para achar rápido na lista. */
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item.active {
    background: var(--fpe-tb-green-soft);
    color: var(--fpe-tb-text);
    box-shadow: inset 2px 0 0 var(--fpe-tb-green);
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item.active i {
    color: var(--fpe-tb-green);
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-item.active:hover {
    background: rgba(185, 242, 39, 0.14);
    color: #ffffff;
}

/* Pai de dropdown com filho ativo: igual ao item ativo, também no hover */
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:hover > .fpe-top-link.active,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:focus-within > .fpe-top-link.active {
    background-color: rgba(185, 242, 39, 0.14);
    color: #ffffff;
}
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:hover > .fpe-top-link.active i,
.fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:focus-within > .fpe-top-link.active i {
    color: var(--fpe-tb-green);
}

/* ---------- Usuário ---------- */
.fpe-topbar-global.fpe-theme-dark .fpe-topbar-user {
    border-left-color: var(--fpe-tb-border);
}
.fpe-topbar-global.fpe-theme-dark .user-pill img {
    border-color: var(--fpe-tb-border-olive);
}
.fpe-topbar-global.fpe-theme-dark .user-name-top {
    color: var(--fpe-tb-text);
}
.fpe-topbar-global.fpe-theme-dark .user-role-top {
    color: var(--fpe-tb-green);
}

.fpe-topbar-global.fpe-theme-dark .btn-logout-top {
    background: var(--fpe-tb-danger-soft);
    color: var(--fpe-tb-danger);
    border-color: var(--fpe-tb-danger-line);
}
.fpe-topbar-global.fpe-theme-dark .btn-logout-top:hover {
    background: rgba(234, 67, 53, 0.18);
    color: #ffffff;
}

/* Entrar (visitante): verdinho sólido, letra preta — mesmo padrão do btn-upgrade do Arsenal */
.fpe-topbar-global.fpe-theme-dark .btn-login-top {
    background: var(--fpe-tb-green);
    color: #111211;
}
.fpe-topbar-global.fpe-theme-dark .btn-login-top:hover {
    background: #c9ff3d;
    color: #000000;
    box-shadow: 0 0 18px rgba(185, 242, 39, 0.35);
}

/* ---------- Mobile (gaveta) ---------- */
@media (max-width: 768px) {
    .fpe-topbar-global.fpe-theme-dark .btn-mobile-menu,
    .fpe-topbar-global.fpe-theme-dark .btn-close-mobile {
        display: block;
    }
    /* Correção: o overlay (z-index 1000, depois no DOM) ficava por cima da
       gaveta, que vive dentro do header (também 1000). Com a gaveta aberta,
       o header sobe acima do overlay e os itens voltam a ser clicáveis. */
    .fpe-topbar-global.fpe-theme-dark:has(.fpe-topbar-menu-container.mobile-active) {
        z-index: 1002;
    }

    .fpe-topbar-global.fpe-theme-dark .fpe-topbar-menu-container {
        background: #1a1b1c;
        border-right: 1px solid var(--fpe-tb-border);
        /* Correção: padding somava 40px aos 100vh e cortava o usuário/sair */
        box-sizing: border-box;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        left: -320px; /* fechada: esconde também a sombra */
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.55);
    }
    .fpe-topbar-global.fpe-theme-dark .fpe-topbar-menu-container.mobile-active {
        left: 0;
    }
    .fpe-topbar-global.fpe-theme-dark .fpe-mobile-drawer-header,
    .fpe-topbar-global.fpe-theme-dark .fpe-topbar-user {
        border-color: var(--fpe-tb-border);
    }
    .fpe-topbar-global.fpe-theme-dark .btn-close-mobile {
        color: var(--fpe-tb-text-muted);
    }
    .fpe-topbar-global.fpe-theme-dark .fpe-dropdown-menu {
        box-shadow: none;
    }
    .fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap.mobile-open .fpe-dropdown-menu {
        background: transparent;
        border: none;
        border-left: 2px solid var(--fpe-tb-green-line);
    }
    /* No celular o dropdown só abre pelo toque (classe mobile-open) */
    .fpe-topbar-global.fpe-theme-dark .fpe-dropdown-wrap:focus-within:not(.mobile-open) .fpe-dropdown-menu {
        opacity: 0;
        visibility: hidden;
        display: none;
    }
}