/* ============================================ */
/* FORÇAR HEADER A APARECER - MÁXIMA PRIORIDADE */
/* ============================================ */
#dashboard .modern-header,
#dashboard:not(.hidden) .modern-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

#dashboard .header-left,
#dashboard .header-right,
#dashboard:not(.hidden) .header-left,
#dashboard:not(.hidden) .header-right {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Saldo e botão Depositar removidos do header (a pedido) */
#dashboard .balance-display,
#dashboard:not(.hidden) .balance-display,
#dashboard .balance-currency,
#dashboard .balance-value,
#dashboard .balance-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#dashboard .deposit-btn-header,
#dashboard:not(.hidden) .deposit-btn-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#dashboard .notification-icon,
#dashboard:not(.hidden) .notification-icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ícone de mensagens (👥) removido do header (a pedido) */
#dashboard .message-icon,
#dashboard:not(.hidden) .message-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#dashboard .user-profile-icon,
#dashboard:not(.hidden) .user-profile-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#dashboard .logo-container,
#dashboard .logo-icon,
#dashboard .logo-text {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Textos do nav em branco (igual às outras páginas) */
#dashboard .logo-text,
#dashboard .header-nav-item,
#dashboard .header-nav .header-nav-item,
#dashboard .header-nav a {
    color: #ffffff !important;
}

#dashboard .header-nav-item.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Setas ▼ de Serviços e Funcionalidades em branco */
#dashboard .header-nav-item span {
    color: #ffffff !important;
}

/* Desktop: nav visível, hamburger escondido; mobile: hamburger visível, nav em dropdown */
#dashboard .header-nav-toggle {
    display: none !important;
}

/* Desktop: menu sempre visível; nav e header-left SEM fundo branco (todas as páginas: index, loja, admin) */
@media (min-width: 769px) {
    #dashboard .header-nav,
    #dashboard .modern-header .header-nav,
    #headerNav {
        display: flex !important;
        background: transparent !important;
    }
    #dashboard .header-left {
        background: transparent !important;
    }
    /* Forçar também na página admin (admin.css carrega antes; esta regra garante nav sem caixa branca) */
    body.admin-page #dashboard .header-nav,
    body.admin-page #dashboard .modern-header .header-nav,
    body.admin-page #headerNav,
    body.admin-page #dashboard .header-left,
    .admin-dashboard .header-nav,
    .admin-dashboard .modern-header .header-nav,
    .admin-dashboard #headerNav,
    .admin-dashboard .header-left {
        background: transparent !important;
    }
}

/* Mobile: menu oculto por padrão, só abre com classe header-nav-open */
@media (max-width: 768px) {

    /* CRÍTICO: Com menu aberto, o header NUNCA pode crescer (evitar overlay que bloqueia a página) */
    #dashboard .modern-header.header-nav-open,
    .modern-header.header-nav-open {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        z-index: 10000 !important; /* acima do backdrop (9998) para header e menu ficarem clicáveis */
    }

    /* Forçar header-right a usar flexbox e o botão ir para a direita */
    #dashboard .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        flex-wrap: nowrap !important;
    }

    /* Garantir que o div interno (notification + profile) não quebre linha */
    #dashboard .header-right>div {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    /* Todos os ícones do header-right com mesma altura (40px) e alinhados na mesma linha */
    #dashboard .header-right .notification-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    #dashboard .header-chat-icon {
        width: 40px !important;
        min-height: 40px !important;
        height: 40px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    #dashboard .header-right .user-profile-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #dashboard .header-right .user-profile-icon img,
    #dashboard .header-right .user-profile-icon #headerUserPlaceholder {
        box-sizing: border-box !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    #dashboard .header-nav-toggle {
        display: flex !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
    }
    #dashboard .header-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.35) !important;
        transform: scale(1.05);
    }
    #dashboard .header-chat-icon {
        transition: background 0.2s ease, transform 0.2s ease, border-radius 0.2s ease !important;
        border-radius: 10px !important;
    }
    #dashboard .header-chat-icon:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: scale(1.05);
    }

    #dashboard .header-nav,
    #dashboard .modern-header .header-nav,
    .dashboard .modern-header .header-nav,
    #headerNav {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        padding: 12px !important;
        gap: 8px !important;
        margin-left: 0 !important;
        z-index: 999 !important;
        border-bottom: 2px solid #e5e7eb !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* Ajustar cores dos links no mobile - FORÇAR TEXTO ESCURO */
    #dashboard .header-nav .header-nav-item,
    #dashboard .modern-header .header-nav .header-nav-item,
    .dashboard .modern-header .header-nav .header-nav-item,
    #headerNav .header-nav-item,
    #headerNav a {
        color: #111827 !important;
        background: transparent !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding: 15px !important;
        display: block !important;
    }

    #dashboard .header-nav .header-nav-item:hover,
    #dashboard .modern-header .header-nav .header-nav-item:hover,
    .dashboard .modern-header .header-nav .header-nav-item:hover,
    #headerNav .header-nav-item:hover,
    #headerNav a:hover {
        background: #f3f4f6 !important;
        color: #1e3a8a !important;
    }

    /* FORÇAR SETAS E SPANS A SEREM ESCUROS NO MOBILE */
    #dashboard .header-nav .header-nav-item span,
    #dashboard .modern-header .header-nav .header-nav-item span,
    .dashboard .modern-header .header-nav .header-nav-item span,
    #headerNav .header-nav-item span,
    #headerNav a span {
        color: #111827 !important;
    }

    /* Menu aberto: máxima especificidade para vencer em todas as páginas (loja, revenda, etc.) */
    #dashboard .modern-header.header-nav-open .header-nav,
    .dashboard .modern-header.header-nav-open .header-nav,
    .modern-header.header-nav-open #headerNav,
    body #dashboard .modern-header.header-nav-open .header-nav,
    body #dashboard .modern-header.header-nav-open #headerNav {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important;
        padding: 12px !important;
        gap: 8px !important;
        z-index: 999 !important;
        border-bottom: 2px solid #e5e7eb !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    /* REGRAS ADICIONAIS PARA SOBRESCREVER ESTILOS INLINE */
    /* Garantir que o nav mobile SEMPRE tenha fundo branco quando aberto */
    nav.header-nav[style*="display: flex"],
    nav.header-nav[style*="display:flex"],
    #headerNav[style*="display: flex"],
    #headerNav[style*="display:flex"] {
        background: #ffffff !important;
    }

    /* Garantir que os links SEMPRE tenham texto escuro no mobile */
    nav.header-nav a,
    nav.header-nav .header-nav-item,
    #headerNav a,
    #headerNav .header-nav-item {
        color: #111827 !important;
    }

    /* Garantir que as setas SEMPRE sejam escuras no mobile */
    nav.header-nav a span,
    nav.header-nav .header-nav-item span,
    #headerNav a span,
    #headerNav .header-nav-item span {
        color: #111827 !important;
    }
}

/* ESCONDER HEADER ANTIGO DEFINITIVAMENTE */
#fixedHeader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}