/* ===== Cabeçalho: 3 colunas, sem sobreposição ===== */
#mainWrap > header.top {
  position: relative;
  z-index: 100;               /* popovers do topo ficam acima da sidebar e do conteúdo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 24px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
#mainWrap .top-left { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; min-width: 0; }
#mainWrap .top-left h1 { margin: 0; font-size: 20px; line-height: 1.2; white-space: nowrap; }
#mainWrap .top-left .base { margin: 2px 0 0; font-size: 12px; }
#mainWrap .global-search { flex: 1 1 320px; min-width: 0; max-width: 600px; margin: 0; }

#mainWrap .hdr-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
#mainWrap .hdr-actions > * { position: relative; flex: 0 0 auto; }

/* Botão de idioma: sempre no fluxo normal, nunca flutuando por cima dos vizinhos */
.lang-wrap { position: relative; display: flex; align-items: center; }
#mainWrap .hdr-actions .lang-btn,
#accessGate .gate-lang .lang-btn {
  position: relative; inset: auto; transform: none; margin: 0; width: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; cursor: pointer; white-space: nowrap;
}

/* Idioma na tela de login: canto superior direito, fora do fluxo do card */
#accessGate .gate-lang { position: fixed; top: 20px; right: 24px; z-index: 20; }

/* Menus de idioma: aparecem sempre que recebem .open */
#langMenu.open, #gateLangMenu.open {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1000;
}

/* Menu do perfil (sidebar): cabe dentro da largura da sidebar e fica na frente */
#profileMenu { z-index: 1000; left: 8px !important; right: auto; width: 300px; max-width: calc(100vw - 24px); }

/* ==========================================================================
   RESPONSIVIDADE DO CABEÇALHO (TABLETS E MOBILE)
   ========================================================================== */
@media (max-width: 900px) {
  #mainWrap .top-left .base { display: none; }
  #mainWrap > header.top { gap: 12px; padding: 10px 16px; }
}

@media (max-width: 768px) {
  #mainWrap > header.top {
    flex-wrap: wrap; /* Permite quebrar em múltiplas linhas */
    padding: 12px;
  }
  
  /* Oculta o título "Portal de Gestão RPA" para manter a logo alinhada à esquerda sem comprimir */
  #mainWrap .top-left h1 {
    display: none !important;
  }
  
  /* Mantém os ícones alinhados à direita, na mesma linha da logo */
  #mainWrap .hdr-actions {
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 8px;
  }
  
  /* Joga a barra de busca para a segunda linha, ocupando 100% da largura */
  #mainWrap .global-search {
    order: 3;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-top: 4px;
  }
  
  /* Reduz ligeiramente o botão de idioma para economizar espaço horizontal */
  #mainWrap .hdr-actions .lang-btn {
    padding: 0 8px;
  }
}