/* ======== Navbar Shared Styles ======== */
/* Estilos compartilhados para navbar em todas as páginas */

/* Safe area para iPhones com notch */
.header.navbar-area {
  padding-top: env(safe-area-inset-top, 0);
}

/* Logo mais à esquerda: reduzir padding-left do container no header para não ficar apertado */
.header .container {
  padding-left: 0.5rem;
}
@media (min-width: 768px) {
  .header .container {
    padding-left: 0.75rem;
  }
}

/* Botão Portal/Login no Header - alinhamento igual ao seletor de idioma */
.header .navbar-nav .nav-item.portal-btn-wrapper {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.portal-btn-wrapper .nav-portal-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.nav-portal-btn {
  background: linear-gradient(135deg, #4951DC 0%, #6C5CE7 100%);
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  text-decoration: none;
  display: inline-block;
  margin-left: 0;
}

.nav-portal-btn:hover {
  background: linear-gradient(135deg, #6C5CE7 0%, #4951DC 100%);
  transform: scale(1.05);
  color: white !important;
  text-decoration: none;
}

/* ======== Language Selector Styles ======== */
.language-selector-wrapper {
  margin-left: 15px !important;
  margin-top: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.language-selector-wrapper .language-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  height: 100%;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-top: 0;
  vertical-align: middle;
  line-height: 1;
}

/* Alinhamento vertical com os links do menu */
.header .navbar-nav .language-selector-wrapper {
  display: flex;
  align-items: center;
  height: auto;
}

.header .navbar-nav .language-selector-wrapper .language-selector {
  display: flex;
  align-items: center;
}

.header .navbar-nav .language-selector-wrapper .lang-btn {
  margin-top: 0;
  align-self: center;
}

/* Ajuste fino de alinhamento vertical */
.header .navbar-nav .nav-item.language-selector-wrapper {
  display: inline-flex;
  align-items: center;
}

.header .navbar-nav .nav-item.language-selector-wrapper .lang-btn {
  margin-top: -2px;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.lang-btn img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-btn i {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.language-selector.open .lang-btn i {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  min-width: 140px;
  z-index: 1000;
}

.language-selector.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 15px;
  border: none;
  background: transparent;
  color: #4B5360;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.lang-option:hover {
  background: #f8f9fa;
  color: #6C5CE7;
}

.lang-option.active {
  background: rgba(108, 92, 231, 0.1);
  color: #6C5CE7;
  font-weight: 600;
}

.lang-option img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

/* Sticky navbar styles for language selector - cinza; apenas item selecionado fica roxo */
.sticky .lang-btn {
  background: rgba(108, 92, 231, 0.1);
  border-color: rgba(108, 92, 231, 0.2);
  color: #4B5360;
}

.sticky .lang-btn:hover {
  background: rgba(108, 92, 231, 0.2);
  border-color: rgba(108, 92, 231, 0.3);
}

/* Mobile responsive */
@media (max-width: 991px) {
  .language-selector-wrapper {
    margin-left: 0 !important;
    margin-top: 15px;
  }
  
  .lang-btn {
    background: rgba(108, 92, 231, 0.1);
    color: #4B5360;
    border-color: rgba(108, 92, 231, 0.2);
  }
  
  .lang-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    margin-top: 5px;
  }
  
  .language-selector.open .lang-dropdown {
    display: block;
  }
  
  .nav-portal-btn {
    padding: 8px 16px !important;
    font-size: 0.9rem;
    margin-left: 5px;
  }
}

@media (max-width: 575.98px) {
  .nav-portal-btn {
    padding: 8px 16px !important;
    font-size: 0.9rem;
    margin-left: 5px;
  }
}

/* ======== Navbar Core Styles ======== */
/* Item ativo no topo (navbar transparente): branco + sublinhado para ficar visível no gradiente */
.header .navbar-area:not(.sticky) .navbar-nav .nav-item a.page-scroll.active,
.header .navbar-area:not(.sticky) .navbar-nav .nav-item .dropdown-toggle.active {
  color: #fff !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.header .navbar-area:not(.sticky) .navbar-nav .nav-item a.page-scroll.active::before,
.header .navbar-area:not(.sticky) .navbar-nav .nav-item .dropdown-toggle.active::before {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Item ativo após scroll (navbar branca): roxo datameros */
.header .navbar-area.sticky .navbar-nav .nav-item a.page-scroll.active,
.header .navbar-area.sticky .navbar-nav .nav-item .dropdown-toggle.active {
  color: #6C5CE7 !important;
  font-weight: 600;
}

/* Hover para links (não-ativo) */
.navbar-nav .nav-item .page-scroll:hover {
  color: #6C5CE7 !important;
}

.header .navbar-area:not(.sticky) .navbar-nav .nav-item .page-scroll:hover {
  color: #fff !important;
}

/* Estilo hover para dropdown-toggle (Dashboard e Integrações) */
.navbar-nav .nav-item .dropdown-toggle:hover,
.navbar-nav .nav-item.dropdown.show > .dropdown-toggle,
.navbar-nav .nav-item.dropdown:hover > .dropdown-toggle {
  color: #6C5CE7 !important;
}

.header .navbar-area:not(.sticky) .navbar-nav .nav-item .dropdown-toggle:hover,
.header .navbar-area:not(.sticky) .navbar-nav .nav-item.dropdown.show > .dropdown-toggle,
.header .navbar-area:not(.sticky) .navbar-nav .nav-item.dropdown:hover > .dropdown-toggle {
  color: #fff !important;
}

/* Trocar barra amarela por roxa e remover segunda barra */
.navbar-nav .nav-item a::before {
  background: #6C5CE7 !important;
}

.navbar-nav .nav-item .page-scroll.active::after {
  display: none !important;
}

/* ======== Dropdown Menu Styles ======== */
.navbar-nav .dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
  top: 100% !important;
  margin-top: 0 !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
  background-color: #fff !important;
  min-width: 200px !important;
}

.navbar-nav .dropdown-item {
  padding: 0.5rem 1rem !important;
  color: #333 !important;
  white-space: nowrap !important;
  position: relative;
  text-decoration: none !important;
}

/* Remover ::before que cria linha no meio do texto */
.navbar-nav .dropdown-item::before {
  display: none !important;
  content: none !important;
}

.navbar-nav .dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: #6C5CE7 !important;
  text-decoration: underline !important;
  text-decoration-color: #6C5CE7 !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 2px !important;
}

/* Garantir que não há ::before no hover também */
.navbar-nav .dropdown-item:hover::before {
  display: none !important;
  content: none !important;
}

.navbar-nav .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.navbar-nav .nav-item.dropdown {
  position: relative;
}

/* Garantir que dropdown não seja afetado por page-scroll */
.navbar-nav .dropdown-toggle.page-scroll {
  pointer-events: auto;
}

/* Evitar que dropdown feche ao clicar dentro */
.navbar-nav .dropdown-menu {
  pointer-events: auto;
}

/* ======== Mobile Responsive ======== */
@media (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin-top: 0.125rem;
    background-color: #f8f9fa;
    border: 0;
    box-shadow: none;
  }
}