/* 
 * Menu Customizado - Estilo Peter Attia MD (Versão 5 - CORRIGIDO PARA LOGIN)
 * Arquivo: menu_customizado.css
 * 
 * CORREÇÃO: Menu responsivo que se adapta ao estado de login/logout
 * mantendo harmonia visual em ambos os estados.
 */

/* Reset e variáveis */
:root {
  --color-primary: #333333;
  --color-white: #ffffff;
  --color-light-gray: #f5f5f5;
  --color-medium-gray: #e0e0e0;
  --color-dark-gray: #555555;
  --color-orange-primary: #f15a22;
  
  /* Cores temáticas */
  --color-exercise: #D6E9F7;
  --color-nutrition: #D7F0E5;
  --color-sleep: #E5D6F0;
  --color-supplements: #F9E4D3;
  --color-mental: #D6EFF7;
  --color-risks: #F7D6D6;
  
  /* Sombras e transições */
  --shadow-dropdown: 0 8px 16px rgba(0, 0, 0, 0.1);
  --transition-default: all 0.3s ease;
  
  /* Espaçamento */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-x2: 60px;

  /* Breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* Largura do menu - RESPONSIVA */
  --menu-width-max: 1400px; /* Aumentado para acomodar botões de login */
  --menu-width-min: 1200px;
  --menu-padding: 20px;
  --menu-height: 70px;
}

/* FORÇA A PRIORIDADE DOS ESTILOS DO MENU */
.custom-menu-container,
.custom-menu-container * {
  box-sizing: border-box !important;
}

/* Estilos gerais do menu */
.custom-menu-container {
  width: 100% !important;
  background-color: var(--color-dark-gray) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  font-family: inherit !important;
  display: flex !important;
  justify-content: center !important;
  padding: 10px 0 !important;
}

.custom-menu {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  background-color: var(--color-white) !important;
  padding: 0 var(--menu-padding) !important;
  height: var(--menu-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: var(--menu-width-max) !important;
  min-width: var(--menu-width-min) !important;
  position: relative !important;
  margin: 0 auto !important;
}

/* Logo */
.custom-menu-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  margin-right: var(--spacing-x2) !important;
  flex-shrink: 0 !important; /* Impede que o logo diminua */
  gap: 8px !important; /* Espaçamento entre favicon e texto */
}

/* Favicon no logo desktop */
.logo-favicon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Container dos itens do menu */
.custom-menu-items {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  position: relative !important;
  flex: 1 !important; /* Ocupa espaço disponível */
  justify-content: center !important; /* Centraliza os itens */
  max-width: 600px !important; /* Limita largura máxima */
}

.custom-menu-item {
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important; /* Impede que os itens diminuam */
}

.custom-menu-link {
  padding: 0 var(--spacing-md) !important;
  color: var(--color-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition: var(--transition-default) !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important; /* Impede quebra de linha */
}

.custom-menu-link:hover {
  color: var(--color-orange-primary) !important;
}

/* Área direita do menu - MELHORADA PARA LOGIN */
.custom-menu-right {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important;
  flex-shrink: 0 !important; /* Impede que diminua */
  margin-left: auto !important; /* Empurra para a direita */
}

/* Botões do menu - MELHORADOS */
.custom-menu-right .btn {
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: var(--transition-default) !important;
  white-space: nowrap !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Estilo específico para o botão primary (dashboard) */
.custom-menu-right .btn-primary {
  background-color: var(--color-orange-primary) !important;
  color: var(--color-white) !important;
  font-weight: 600 !important;
}

.custom-menu-right .btn-primary:hover {
  background-color: #d63e00 !important;
  color: var(--color-white) !important;
  transform: translateY(-1px) !important;
}

/* Estilo para botões outline */
.custom-menu-right .btn-outline-primary {
  background-color: transparent !important;
  color: var(--color-orange-primary) !important;
  border: 1px solid var(--color-orange-primary) !important;
}

.custom-menu-right .btn-outline-primary:hover {
  background-color: var(--color-orange-primary) !important;
  color: var(--color-white) !important;
}

/* Ícones do menu */
.custom-menu-right .search-icon,
.custom-menu-right .login-icon {
  margin-left: var(--spacing-sm) !important;
  cursor: pointer !important;
  color: var(--color-primary) !important;
  font-size: 1.2rem !important;
  padding: 8px !important;
  transition: var(--transition-default) !important;
}

.custom-menu-right .search-icon:hover,
.custom-menu-right .login-icon:hover {
  color: var(--color-orange-primary) !important;
}

/* USER DROPDOWN - ESTILOS ESPECÍFICOS */
.custom-menu-right .dropdown {
  margin-left: var(--spacing-sm) !important;
}

.custom-menu-right .dropdown-toggle-custom {
  border: none !important;
  background: none !important;
  outline: none !important;
  padding: 4px !important;
  cursor: pointer !important;
}

.custom-menu-right .dropdown-toggle-custom:focus {
  box-shadow: none !important;
}

.custom-menu-right .user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--color-orange-primary) !important;
}

.custom-menu-right .user-initial {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--color-orange-primary) !important;
  color: var(--color-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* DROPDOWNS - MANTIDOS OS ESTILOS ORIGINAIS */
.custom-dropdown {
  position: fixed !important;
  top: 90px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--menu-width-max) !important;
  max-width: 95vw !important;
  background-color: var(--color-white) !important;
  box-shadow: var(--shadow-dropdown) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: var(--transition-default) !important;
  z-index: 999 !important;
  padding: var(--spacing-xl) !important;
  border-radius: 0 0 8px 8px !important;
}

.custom-menu-item:hover .custom-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Painéis coloridos */
.custom-dropdown-panels {
  display: flex !important;
  justify-content: space-between !important;
  gap: var(--spacing-md) !important;
  width: 100% !important;
  max-width: var(--menu-width-max) !important;
  margin: 0 auto !important;
}

.custom-dropdown-panel {
  flex: 1 !important;
  min-width: 0 !important;
  max-height: 360px !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: var(--spacing-md) !important;
  border-radius: 8px !important;
  background-color: inherit !important;
}

.custom-dropdown-panel.blue { background-color: var(--color-exercise) !important; }
.custom-dropdown-panel.green { background-color: var(--color-nutrition) !important; }
.custom-dropdown-panel.purple { background-color: var(--color-sleep) !important; }
.custom-dropdown-panel.orange { background-color: var(--color-supplements) !important; }
.custom-dropdown-panel.light-blue { background-color: var(--color-mental) !important; }
.custom-dropdown-panel.red { background-color: var(--color-risks) !important; }

.custom-dropdown-title {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--spacing-md) !important;
}

.custom-dropdown-description {
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  color: var(--color-dark-gray) !important;
  margin-bottom: var(--spacing-md) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.custom-dropdown-button {
  display: inline-block !important;
  padding: 8px 20px !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: var(--color-white) !important;
  text-decoration: none !important;
  border-radius: 50px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  transition: var(--transition-default) !important;
  align-self: flex-start !important;
  margin-top: auto !important;
}

.custom-dropdown-button:hover {
  background-color: rgba(246, 120, 40, 0.85) !important;
}

/* Layout para dropdown de tópicos */
.custom-dropdown-topics {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: var(--spacing-lg) !important;
  width: 100% !important;
}

.custom-dropdown-category {
  margin-bottom: var(--spacing-xl) !important;
}

.custom-dropdown-category-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--spacing-md) !important;
  letter-spacing: 0.5px !important;
}

.custom-dropdown-subcategory {
  margin-bottom: var(--spacing-xs) !important;
}

.custom-dropdown-subcategory a {
  color: var(--color-dark-gray) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  transition: var(--transition-default) !important;
}

.custom-dropdown-subcategory a:hover {
  text-decoration: underline !important;
}

.custom-dropdown-actions {
  display: flex !important;
  justify-content: center !important;
  gap: var(--spacing-md) !important;
  margin-top: var(--spacing-xl) !important;
  width: 100% !important;
  border-top: 1px solid var(--color-medium-gray) !important;
  padding-top: var(--spacing-xl) !important;
}

.custom-dropdown-action-button {
  padding: 12px 25px !important;
  border-radius: 50px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: var(--transition-default) !important;
}

.custom-dropdown-action-button.primary {
  background-color: var(--color-exercise) !important;
  color: var(--color-primary) !important;
}

.custom-dropdown-action-button.secondary {
  background-color: #333333 !important;
  color: var(--color-white) !important;
}

.custom-dropdown-action-button:hover {
  opacity: 0.9 !important;
}

/* Menu mobile */
.custom-menu-mobile-toggle {
  display: none !important;
  font-size: 1.5rem !important;
  color: var(--color-primary) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.custom-menu-mobile-close {
  display: none !important;
  position: absolute !important;
  top: var(--spacing-md) !important;
  right: var(--spacing-md) !important;
  font-size: 1.5rem !important;
  color: var(--color-primary) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 1001 !important;
}

/* RESPONSIVIDADE MELHORADA */
@media (max-width: 1400px) {
  :root {
    --menu-width-max: 95vw;
  }

  .custom-menu {
    padding: 0 15px !important;
  }

  .custom-menu-link {
    padding: 0 10px !important;
    font-size: 0.85rem !important;
  }

  .custom-menu-right .btn {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }

  .logo-favicon {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 1200px) {
  .custom-dropdown-topics {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .custom-dropdown-panels {
    flex-wrap: wrap !important;
  }
  
  .custom-dropdown-panel {
    flex: 0 0 calc(50% - var(--spacing-lg)) !important;
    max-width: calc(50% - var(--spacing-lg)) !important;
    margin-bottom: var(--spacing-lg) !important;
  }
}

@media (max-width: 992px) {
  .custom-dropdown-topics {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .custom-menu-link {
    font-size: 0.8rem !important;
    padding: 0 8px !important;
  }
  
  .custom-menu-right .btn {
    padding: 5px 10px !important;
    font-size: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .custom-menu {
    height: 70px !important;
    padding: 0 15px !important;
  }

  .custom-menu-items {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background-color: var(--color-white) !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 80px 0 20px 0 !important;
    overflow-y: auto !important;
    z-index: 1055 !important;
    transition: left 0.3s ease !important;
    display: flex !important;
  }

  .custom-menu-items.mobile-open {
    left: 0 !important;
  }
  
  .custom-menu-item {
    width: 100% !important;
    height: auto !important;
    border-bottom: 1px solid var(--color-medium-gray) !important;
    margin: 0 !important;
  }

  .custom-menu-link {
    width: 100% !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: auto !important;
    color: var(--color-primary) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: all 0.2s ease !important;
  }

  .custom-menu-link:hover {
    background-color: var(--color-light-gray) !important;
    color: var(--color-orange-primary) !important;
    padding-left: calc(var(--spacing-lg) + 10px) !important;
  }
  
  .custom-dropdown {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none !important;
    padding: 0 0 var(--spacing-md) !important;
    width: 100% !important;
  }
  
  .custom-menu-item.active .custom-dropdown {
    display: block !important;
  }
  
  .custom-dropdown-topics {
    grid-template-columns: 1fr !important;
  }
  
  .custom-dropdown-panels {
    flex-direction: column !important;
  }
  
  .custom-dropdown-panel {
    flex: 1 0 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--spacing-md) !important;
    min-height: auto !important;
  }
  
  .custom-menu-mobile-toggle,
  .custom-menu-mobile-close {
    display: block !important;
  }
  
  .custom-menu-right {
    gap: 5px !important;
  }
  
  .custom-menu-right .btn {
    display: none !important;
  }
  
  .custom-menu-right .search-icon,
  .custom-menu-right .login-icon {
    margin-left: 5px !important;
  }

  /* Overlay para menu mobile */
  .mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1054 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .mobile-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Prevenir scroll do body quando menu estiver aberto */
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* Melhorar acessibilidade dos botões */
  .custom-menu-mobile-toggle:focus,
  .custom-menu-mobile-close:focus {
    outline: 2px solid var(--color-orange-primary) !important;
    outline-offset: 2px !important;
  }

  /* Animação dos itens do menu */
  .custom-menu-item {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
    transition: all 0.3s ease !important;
  }

  .custom-menu-items.mobile-open .custom-menu-item {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  /* Delay progressivo para animação dos itens */
  .custom-menu-items.mobile-open .custom-menu-item:nth-child(1) { transition-delay: 0.1s !important; }
  .custom-menu-items.mobile-open .custom-menu-item:nth-child(2) { transition-delay: 0.2s !important; }
  .custom-menu-items.mobile-open .custom-menu-item:nth-child(3) { transition-delay: 0.3s !important; }
  .custom-menu-items.mobile-open .custom-menu-item:nth-child(4) { transition-delay: 0.4s !important; }
  .custom-menu-items.mobile-open .custom-menu-item:nth-child(5) { transition-delay: 0.5s !important; }
  .custom-menu-items.mobile-open .custom-menu-item:nth-child(6) { transition-delay: 0.6s !important; }
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-10px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

.custom-dropdown {
  animation: fadeIn 0.3s ease forwards !important;
}

/* CORREÇÃO PARA CONFLITOS COM BOOTSTRAP E OUTROS CSS */
.custom-menu-container .btn:focus,
.custom-menu-container .btn:active {
  box-shadow: none !important;
  outline: none !important;
}

.custom-menu-container .dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
  padding: 0.5rem 0 !important;
  min-width: 250px !important;
}

.custom-menu-container .dropdown-item {
  padding: 0.75rem 1.5rem !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.custom-menu-container .dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: var(--color-orange-primary) !important;
}

/* Espaçamento do body para compensar menu fixo APENAS EM MOBILE */
@media (max-width: 768px) {
  body {
    padding-top: 70px !important;
  }
}