/* ===== PADRONIZAÇÃO VISUAL E RESPONSIVIDADE INTELIGENTE DO HEADER (DESKTOP APENAS) ===== */

/*
 * Sistema completo de padronização visual e responsividade inteligente
 * - Todos os itens do menu com mesmo padrão visual
 * - Avatar/emoji à esquerda, nome centralizado, seta à direita
 * - Ocupação inteligente do espaço horizontal
 * - Redução proporcional quando necessário
 * - Dropdown ancorada ao botão
 */

/* =============================================================================
   LAYOUT PRINCIPAL DO HEADER - APENAS DESKTOP
   ============================================================================= */

@media (min-width: 769px) {
    /* DESKTOP - Ocultar elementos mobile */
    .user-submenu-mobile {
        display: none !important;
    }

    /* Header principal - deve permitir dropdown aparecer */
    .header-fixed {
        overflow: visible !important;
    }

    /* Header principal - layout flexível e inteligente */
    .header-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap; /* Sempre em uma linha */
        overflow: visible !important; /* ✅ CORRIGIDO: Permite dropdown aparecer */
        transition: all 0.3s ease;
    }

    /* Container de busca - flexível mas com limites */
    .search-container {
        flex: 1 1 200px; /* Cresce, encolhe, mínimo 200px */
        min-width: 200px;
        max-width: 400px;
        margin: 0;
        transition: all 0.3s ease;
    }

    /* Menu principal - ocupa espaço restante */
    .main-nav {
        flex: 0 1 auto; /* Não cresce, encolhe conforme necessário */
        min-width: 0; /* Permite encolhimento */
        margin-left: auto; /* Empurra para a direita */
    }

    /* Lista do menu - layout flexível */
    .main-nav > ul {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Alinha à direita */
        gap: clamp(0.3rem, 0.8vw, 0.8rem); /* Gap responsivo */
        list-style: none;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
    }

    /* =============================================================================
       PADRONIZAÇÃO VISUAL DE TODOS OS ITENS DO MENU
       ============================================================================= */

    /* Base para todos os itens - estilo unificado */
    .main-nav ul li {
        flex: 0 0 auto; /* Não cresce nem encolhe */
        transition: all 0.3s ease;
    }

    /* Links normais do menu - padronização visual */
    .main-nav a {
        display: flex;
        align-items: center;
        gap: clamp(0.3rem, 0.5vw, 0.5rem);
        padding: clamp(0.4rem, 0.8vw, 0.7rem) clamp(0.8rem, 1.2vw, 1.1rem);
        background: transparent;
        color: #ffffff;
        text-decoration: none;
        font-weight: 500;
        font-size: clamp(0.75rem, 0.9vw, 0.95rem);
        border-radius: 6px;
        transition: all 0.3s ease;
        white-space: nowrap;
        min-height: 2.5rem;
        box-sizing: border-box;
    }

    .main-nav a:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
        transform: translateY(-1px);
    }

    /* =============================================================================
       BOTÃO DO USUÁRIO - PADRONIZAÇÃO COM OUTROS ITENS
       ============================================================================= */

    /* Seção de autenticação */
    .header-auth-section {
        display: flex;
        align-items: center;
        margin: 0;
    }

    /* Dropdown do usuário */
    .user-dropdown {
        position: relative;
    }

         /* Botão do usuário - MESMA padronização visual dos outros itens */
     .user-dropdown-toggle {
         display: flex;
         align-items: center;
         gap: clamp(0.3rem, 0.5vw, 0.5rem);
         padding: clamp(0.4rem, 0.8vw, 0.7rem) clamp(0.8rem, 1.2vw, 1.1rem);
         background: transparent;
         color: #ffffff !important;
         border: none;
         border-radius: 6px;
         font-family: inherit;
         font-weight: 500;
         font-size: clamp(0.75rem, 0.9vw, 0.95rem);
         cursor: pointer;
         transition: all 0.3s ease;
         white-space: nowrap;
         min-height: 2.5rem;
         box-sizing: border-box;
         outline: none;
     }

     .user-dropdown-toggle:hover,
     .user-dropdown-toggle:focus {
         background-color: rgba(255, 255, 255, 0.9);
         color: #333333 !important;
         transform: translateY(-1px);
     }

     /* Garantir que o texto interno também seja branco normalmente */
     .user-dropdown-toggle * {
         color: #ffffff !important;
     }

     /* No hover, texto deve ficar preto */
     .user-dropdown-toggle:hover *,
     .user-dropdown-toggle:focus * {
         color: #333333 !important;
     }

    /* Avatar do usuário - tamanho responsivo */
    .user-avatar {
        width: clamp(1.8rem, 2.2vw, 2.2rem);
        height: clamp(1.8rem, 2.2vw, 2.2rem);
        border-radius: 50%;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        flex-shrink: 0;
    }

    /* Nome do usuário */
    .user-display-name {
        font-weight: 500;
        color: inherit;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: clamp(80px, 12vw, 150px);
    }

    /* Seta do dropdown - sempre à direita */
    .user-dropdown-arrow {
        font-size: 0.8em;
        color: inherit;
        margin-left: auto;
        flex-shrink: 0;
        opacity: 0.8;
    }

    /* =============================================================================
       DROPDOWN MENU - ANCORAGEM CORRETA
       ============================================================================= */

    /* Menu dropdown - ancorado ao botão */
    .user-dropdown-menu {
        position: fixed !important; /* Fixed para escapar de todos os containers */
        top: auto !important;
        right: auto !important;
        left: auto !important;
        background: #ffffff !important;
        color: #333 !important;
        border-radius: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        min-width: 180px;
        max-width: 220px;
        padding: 0.5rem 0;
        z-index: 99999 !important;
        display: none !important; /* Oculto por padrão */
        opacity: 0;
        transform: translateY(0);
        transition: opacity 0.3s ease;
    }

    .user-dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* Itens do dropdown */
    .user-dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        color: #333333 !important;
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        cursor: pointer;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }

    .user-dropdown-menu .dropdown-item:hover,
    .user-dropdown-menu .dropdown-item:focus {
        background: #f8f9fa !important;
        color: #007cba !important;
    }

    /* Divider no dropdown */
    .user-dropdown-menu .dropdown-divider {
        border: none;
        border-top: 1px solid #e9ecef;
        margin: 0.5rem 0;
    }

    /* =============================================================================
       RESPONSIVIDADE INTELIGENTE - REDUÇÃO PROPORCIONAL
       ============================================================================= */

    /* Classe para redução de tamanho quando necessário */
    .header-content.compact-mode {
        gap: 0.3rem;
    }

    .header-content.compact-mode .search-container {
        min-width: 150px;
        max-width: 250px;
    }

    .header-content.compact-mode .main-nav > ul {
        gap: 0.2rem;
    }

    .header-content.compact-mode .main-nav a,
    .header-content.compact-mode .user-dropdown-toggle {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        gap: 0.25rem;
    }

    .header-content.compact-mode .user-avatar {
        width: 1.6rem;
        height: 1.6rem;
    }

    .header-content.compact-mode .user-display-name {
        max-width: 80px;
    }

    /* Modo super compacto para telas muito apertadas */
    .header-content.super-compact-mode {
        gap: 0.2rem;
    }

    .header-content.super-compact-mode .search-container {
        min-width: 120px;
        max-width: 200px;
    }

    .header-content.super-compact-mode .main-nav > ul {
        gap: 0.1rem;
    }

    .header-content.super-compact-mode .main-nav a,
    .header-content.super-compact-mode .user-dropdown-toggle {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        gap: 0.2rem;
    }

    .header-content.super-compact-mode .user-avatar {
        width: 1.4rem;
        height: 1.4rem;
    }

    .header-content.super-compact-mode .user-display-name {
        max-width: 60px;
    }
}

/* =============================================================================
   FUNCIONALIDADE DOS DROPDOWNS (CANAIS) - DESKTOP
   ============================================================================= */

@media (min-width: 769px) {
    /* Dropdown de canais */
    .dropdown {
        position: relative;
    }

    .dropdown:hover .submenu-canais {
        display: block !important;
    }

    .submenu-canais {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        width: fit-content;
        min-width: 200px;
        max-width: 280px;
        display: none;
        list-style: none;
        padding: 10px 0;
        border-radius: 8px;
        z-index: 1001;
        white-space: nowrap;
    }

    .submenu-canais li {
        padding: 0;
        display: block;
        width: 100%;
    }

    .submenu-canais a {
        display: block;
        padding: 12px 20px;
        color: #2b58de;
        text-decoration: none;
        transition: all 0.3s ease;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .submenu-canais a:hover {
        background: #2b58de;
        color: #ffffff;
    }
}

/* =============================================================================
   ESTILOS GLOBAIS PARA TODAS AS PÁGINAS
   ============================================================================= */

/* Garantir que o dropdown do usuário funcione em TODAS as páginas */
.user-dropdown-menu {
    position: fixed !important;
    background: #ffffff !important;
    color: #333333 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    min-width: 180px !important;
    max-width: 220px !important;
    padding: 0.5rem 0 !important;
    z-index: 99999 !important;
    display: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.user-dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
}

.user-dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.user-dropdown-menu .dropdown-item:hover,
.user-dropdown-menu .dropdown-item:focus {
    background: #f8f9fa !important;
    color: #007cba !important;
}

.user-dropdown-menu .dropdown-divider {
    border: none !important;
    border-top: 1px solid #e9ecef !important;
    margin: 0.5rem 0 !important;
}

/* =============================================================================
   MOBILE - MANTER CÓDIGO EXISTENTE INTOCADO
   ============================================================================= */

@media (max-width: 768px) {
    /* MOBILE - Ocultar botão do usuário no header principal */
    .header-content .header-auth-section {
        display: none !important;
    }
    
    /* MOBILE - Botão do usuário estilo lista (apenas no menu hamburger) */
    .main-nav .header-auth-section {
        display: block !important;
        position: relative;
        margin-left: 0 !important;
    }
    
    .main-nav .user-dropdown-toggle {
        width: 100%;
        min-width: unset;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 15px 0;
        background: transparent;
        color: #ffffff;
        border: none;
        font-size: 1.1rem;
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .main-nav .user-dropdown-toggle:hover,
    .main-nav .user-dropdown-toggle:focus {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .main-nav .user-dropdown-toggle * {
        color: #ffffff !important;
    }
    
    .main-nav .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .main-nav .user-display-name {
        font-size: 1.1rem;
        flex-grow: 1;
    }
    
    .main-nav .user-dropdown-arrow {
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }
    
    /* Desktop dropdown oculto no mobile */
    .main-nav .user-dropdown-menu {
        display: none !important;
    }
    
    /* Submenu mobile do usuário */
    .main-nav .user-submenu-mobile {
        display: none;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        margin: 10px 0 0 0;
        padding: 8px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        list-style: none;
        transition: all 0.3s ease;
    }
    
    .main-nav .user-submenu-mobile.open {
        display: block;
        max-height: 200px;
        opacity: 1;
    }
    
    .main-nav .user-submenu-mobile a,
    .main-nav .user-submenu-mobile .mobile-logout-btn {
        display: block;
        padding: 12px 0;
        color: #ffffff !important;
        text-decoration: none;
        font-size: 1rem;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-family: inherit;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .main-nav .user-submenu-mobile a:hover,
    .main-nav .user-submenu-mobile .mobile-logout-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff !important;
    }
    
    /* Rotação da seta quando aberto */
    .main-nav .user-dropdown-toggle.mobile-open .user-dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Dropdown de canais no mobile */
    .submenu-canais {
        position: static;
        display: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 10px;
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .submenu-canais.open {
        display: block !important;
    }
}